본문 바로가기

React32

[React] map 함수 적용시 key props를 부여하는 이유 React에서 map 함수를 사용할 때 렌더링엔 문제가 없지만 console 창에 이렇게 뜰 때가 있다. mapping하는 과정에서 배열의 각 요소마다 고유한 key 값을 지정해줄 수 있는데, 그것을 생략하면 저런 오류가 뜬다! 그래서 ⭐ list 내의 각 child에는 고유한 key 값이 있어야한다. ⭐ 🔥왜 key 값을 줘야할까? React는 렌더링 할 때 기존 배열과 새로운 배열을 비교해서 변경된 부분만 다시 렌더링한다. 따라서 요소가 변경되었을때 더 빠르고 효율적으로 렌더링 하기 위해 요소 고유의 key 값을 준다. 참고 사이트 ▶ 리스트와 Key - React 2021. 11. 18.

HTML, CSS 코드를 React로 변환할 때 주의할 점 🐳 가 여러개 있을 땐 , 태그로 전체 코드를 감싸줄 것! ex) import React from 'react'; class Login extends React.Component { return ( 안녕하세요 안녕히계세요 ); } 🐳 Self Closing Tag 꼭 닫아 줄 것! , , , , , 안 닫으면 오류 떠요 🐳 짝 맞는지 확인 할 것! 본인은 짝 안맞아서 한참 삽질했음ㅠ 🐳 import 경로 확인 할 것! CSS 파일이나 img 파일 경로 설정 잘못하면 적용이 안돼요ㅎㅎ... 2021. 11. 17.

[React] e.preventDefault(); 🪓 수정 전 코드 writeComment = e => { this.setState({ comment: e.target.value, }); }; addComment = e => { ⭐️ e.preventDefault(); const { commentList, comment } = this.state; this.setState({ commentList: [ ...commentList, { id: commentList.length + 1, userName: 'zzz_yk', content: comment, }, ], comment: '', }); }; enterKey = e => { if (e.key === 'Enter') { this.addComment(); } }; 게시 이렇게 하고 댓글을 쓰고 Enter.. 2021. 11. 16.

[React] Each child in a list should have a unique key prop. 리액트를 개발하면서 한번쯤은 보셨을 경고 메세지... 라고 한다😥 map 함수에 대한 이해가 부족했을때(솔직히 지금도 부족함ㅎㅎ) 배운걸 적용해보느라 열심히 삽질하고 있었음.. 🪓 key 값을 주지 않은 Comment.js import React from 'react'; import './Comment.scss'; class Comment extends React.Component { render() { const { commentList } = this.props; return ( {commentList.map(comment => { return ( // ⭐️ key 값이 없음!! {comment.userName} {comment.content} ); })} ); } } export default Co.. 2021. 11. 16.

[React] Invalid DOM property `class`. Did you mean `className`? React에선 className으로 써야하는데 class로 하면 저런 오류가 발생한다. 안좋은 예시 👇🏻 좋은 예시 👇🏻 2021. 11. 16.

주석 사용법 🥊 React 코드 주석 한 줄 주석 : // 여러 줄 주석 : /* */ Javascript와 동일함! // 한 줄 주석 componentDidMount() { // console.log("hello world"); return; }; // 여러 줄 주석 componentDidMount() { /* console.log("hello world"); return; */ }; 2021. 11. 16.

이전 1 2 3 4 5 6 다음

티스토리툴바