💻 더 나은 개발자 되기/React 3

key는 리액트에서 어떤 항목을 추가, 삭제, 변경 등을 할 때 식별을 위해 사용하게 됩니다. key는 변경되지 않는 유일값으로 설정하는데, 보통 ID가 유일하기에 ID값을 사용하는 경우가 많습니다. key값이 존재하지 않으면 배열 중간의 값이 제거가 되는 등 해당 인덱스에 대한 값이 변하게 됩니다. 이때문에 고유한 값으로 key값을 주게 되면, 배열내 값이 변경이 되어서 리렌더링을 할 때, 값을 재사용 하는 경우 불필요한 렌더링을 줄일 수 있어서 최적화에도 도움을 줍니다.

리액트에서 이미지를 불러오는 걸 시도했다. json파일에 이미지 경로를 넣고 그 경로를 화면에서 img 태그의 src에 넣어줬는데, 이미지를 제대로 불러오지 못하는 현상이 발생되었다. 다양한 경로를 시도해봤으나 실패. 상대경로다보니 어느곳을 기준으로 잡아야 할 지 감이 안왔다. App.js인지, index.html인지, json인지 직접 뿌려주는 화면인지.. 기준은 index.html이 되는 것이 맞다. 나는 src안에 img 폴더를 두고 그걸로 사용했는데, 이렇게 하면 안된다. ondex.html이 위치한 public 내에 이미지 폴더를 넣어서 사용해줘야 한다. 이렇게 하면 src - data내의 json파일에서 "../img/place/2-01.jpg" 이런형태로 경로를 넣어주면 json을 뿌려주는 ..

글 리스트가 있을 때 해당 글을 클릭하면 해당 페이지로 이동이 되는 기능을 만들려고 한다. props를 통해 데이터를 전달하는 것 까지는 이해가 되는데, onClick이벤트에 대한 정리가 잘 되지 않아 이 부분에 대한 흐름만 정리해본다. 코드는 길어질 수 있으니 import부분과 export 부분 생략 후 작성했다. 아래 코드 작성을 해둔걸 한 눈에 볼 수 있게 하나의 이미지로 만들어봤다. 🌼 PostListItem.jsx //PostListItem.jsx function PostListItem(props){ const { post, onClick} = props; return ( {post.title} ); } div를 클릭했을 때 props를 통해 받아온 onClick을 사용한다. 🌼 PostList..