-
[리액트를 다루는 기술] 컴포넌트의 반복프로그래밍/React 2023. 6. 18. 18:14
반복되는 컴포넌트를 다루는 기술~
박복되는 코드를 작성하는 경우 (댓글달기 같은 경우를 생각하면 됨) key라는 놈이 좀 중요한 역할을 한다 이 key를 설정을 안해주면 Virtual DOM을 일일히 비교하면서 변화를 감지하는 수고스러운 행동을 하기 때문에 key를 설정하고 이 key의 변화를 바로바로 얘기해주면 아주 좋다 props 설정 하는 것처럼 하면 되서 하기도 쉽다 쉬워~
이때 map()함수 꿀팁이 있으니 map()함수에서 보자
map()
먼저 ES6문법에서 새로워진 화살표함수와 const를 통해서 정의하는게 보기 좋다
key 설정 꿀팁은 map함수에서 전달되는 콜백함수의 index값을 이용하자 이다.
map()을 써서 일일히 key를 할당을 해야하는데 이 방식을 쓴다면 아주 꿀빨면서 key를 차근차근 할당 할 수 있다.
단순히 index값을 key로 할당하면 비효율적이라는데 찾기힘들어서인 것 같다.
const nameList = names.map((name, index) => <li key= {index}>{name}</li>
concat()
배열을 추가 할 때 사용하는 녀석이다 push가 안되는 이유를 모른다면 안된다. 불변성 유지해야한다 이거 나중에 최적화랑도 연결되기 때문에 기억해야한다.
혹시나 해서 말하지만 새로운 배열을 만들어준다(사본 만들기)
filter()
지울 때는 이녀석을 이용하면 된다 쓰는 방법 모른다면 안된다.
'프로그래밍 > React' 카테고리의 다른 글
[리액트 다루는 기술] 리덕스 작동원리 && 기초 (0) 2023.06.21 [리액트를 다루는 기술] immer (0) 2023.06.20 [리액트를 다루는 기술] Hook (useState, Effect, Reducer, Ref) 1편 (0) 2023.06.18 [리액트를 다루는 기술] 컴포넌트 (0) 2023.06.18 [리액트를 다루는 기술] JSX && 알쓸신잡 (0) 2023.06.18