TIL | 리액트 반복문(map, key)

자바스크립 코드 -> 리액트로 변환 시, 바뀌는 부분을 주목하라!

• 클래스 컴포넌트일 때는 state가 바뀔 때마다 render() 내부 코드가 재실행된다.

• state를 선언할 때 constructor를 작성하지 않아도 된다.

• value 속성과 onChange 속성은 세트로 항상 같이 작성해줘야 한다.

• render()와 같이 리액트에서 제공하는 메서드가 아니라 직접 만든 메서드는 arrow function(화살표 함수) 형태로 작성해야 한다.
  (만약, 화살표 함수로 작성하지 않으면 constructor를 작성해줘야 한다)

• 리액트에서 반복문을 돌릴 때 배열 메서드인 map을 사용한다!
  (💡 map은 함수형 프로그래밍에서 핵심! 배열을 일대일 짝짓고 jsx 형태로 바꾸어 화면에 표시)

map을 사용하는 방법!

1. 유사한 형태로 반복되면 배열로 만들기

2. 내부적으로 내용이 바뀌는 공통되는 부분을 만들고 return문 안에 작성하기 (ex. < li >{v}< /li >)

3. 공통되는 형태에서 달라지는 부분은 중괄호({ })로 감싸준다.
   즉, 중괄호({ }) 안에 들어가는 부분이 배열 안에 요소 하나하나를 의미한다. 배열로부터 요소 하나씩 받아오며 공통되는 형태로 그려지는 것이다.

• 내용이 바뀌는 부분이 한 쌍에 하나가 아니라 두 개라면? 마치 'key-value' 형태라면?
  2차원 배열 형태와 객체 형태의 두가지 방법이 있으며, 객체를 많이 사용한다.

1. 1차원적인 배열이 아니라 2차원 배열 형태를 사용한다.
   달라지는 부분을 한 쌍을 이뤄 각각의 배열 하나로 작성해주면 전체 배열의 요소를 불러올 때 작은 배열 하나하나가 요소가 된다.
   (ex. < li >< b >{v[0]}< /b > - {v[1]}< /li >)

2. 배열 안에 객체를 사용한다.
   map 메서드의 콜백 함수를 통해 불러오는 요소는 객체 자체이다.
   (ex. < li >< b >{v.fruit}< /b > - {v.taste}< /li >)

key를 사용하는 방법!

✨ map을 돌릴 때 항상 상단에 key를 추가해야 한다.
key 속성 값으로는 배열 안에 객체들을 구분지을 수 있는 고유한 값으로 작성해야 한다.
리액트가 key를 기준으로 엘리먼트 추가/수정/삭제 등을 판단하고, 같은 컴포넌트의 여부를 판단하여 성능 최적화하는데 사용된다.
key 값을 임의로 index로 설정하는 경우가 있는데 배열의 순서가 바뀌면 리액트에서 무엇이 바뀌었는지 판단하기가 어려워져 성능 최적화에 문제가 생길 수 있으므로 피하는 것이 좋다.

위의 방법으로 반복문을 돌릴 수 있지만 가독성이 떨어지는 측면이 있어서 가독성 뿐만 아니라 성능에도 필수적인 props를 사용한다.

• 반복문에 사용되는 코드가 길어질 때는 컴포넌트 단위로 분해하는 것이 좋다.
  가독성이 좋아지고, 재사용이 가능하며, 성능 최적화할 때 좋다.

• 컴포넌트로 분리시키면 반복문에서 받아오는 값이 전달되지 않는다.
  다른 컴포넌트에서 그 값을 받아오려면 props를 사용해 연결고리를 만들어준다.
  내가 (부모 컴포넌트에서-'값 전달') 설정한 props명 그대로 (분리한 자식 컴포넌트에서-'값 받기') 작성하여 값을 불러온다.

• (자식 컴포넌트)코드에 props가 있고, props를 통해 값을 불러온다면 부모 컴포넌트가 있음을 유추할 수 있다.

• 부모의 자식의 자식의 자식... 마치 할아버지, 고조할아버지가 있는 가족 관계도에서 props를 전달하고 받아올 때 발생하는 문제를 방지하고자 Context API, Redux, MobX 등 상태 관리 라이브러리를 사용한다.

---

• ✨배열 형태의 state를 변경할 때 배열 메서드 push를 쓰면 안된다.
  이유는 불변성이기 때문인데 push를 사용하면 새로운 배열을 만드는 것이 아니라 기존 배열에 값을 추가하는 것이다.
  그런데 배열에 값이 추가된 사실을 리액트는 파악하지 못한다.
  그렇기 때문에 새로운 변수를 생성하고 전개 연산자를 이용해 기존 배열을 복사하여 새로운 배열을 만들어 리액트가 감지할 수 있도록 한다.
  기존 배열과 새로운 배열이 서로 다르기 때문에 state가 바뀐 것을 알아채고 렌더링을 해준다. (참조가 바뀌어 변경이 일어나면 render() 함수가 새롭게 실행된다)

• 리액트가 알아서 렌더링해주고, 우리는 state만 바꿔주면 된다.

⁕ 출처: Youtube_Zerocho React 기본 강좌