10.03.22{코딩일기} 벨로퍼트와 함께하는 모던 리액트 1-11 챕터리뷰

[ 새롭게 알게 된 것 ]

---

1. 하나의 파일에 여러개의 컴포넌트 선언가능

---

컴포넌트끼리 파라미터를 통해 값을 주고 조건에 맞게 수정된 값을 반환 해줄 수 있음.

import React from 'react';

# 하나의 파일에 서로다른 컴포넌트를 선언함
function A() {return(..)}

function B() {return(..)}


export default A
export default B

 

---

 

2. 배열에 담긴 값은 컴포넌트 재사용을 고려해야함

---

하니씩 일일이 배열의 인덱스를 조회하며 렌더링 할 수 있음.

동적으로 배열을 렌더링 하지 못함. 하드코딩으로 박아놓은 인덱스들만 조회 가능함.

만약 배열에 계속 새로운 값이 추가된다면? 또는 배열이 state로 관리된다면 더욱 동적으로 렌더링 해줘야됨.

이를 위한 함수가 바로 map()이라는 함수임.

아래는 컴포넌트가 반환하는 값에 map을 활용한 예시임.

User라는 컴포넌트에 user라는 값을 전달해줄때 아래와 같이 작성함.

단 이때 user는 배열 인덱스 값중 하나를 나타내는 변수임.

p.s. user가 바로 props임

  return (
    <div>
      {users.map(user => (
        <User user={user} />
      ))}
    </div>
  );

User컴포넌트에 전달된 'user'라는 props는 객체임.

객체안에 key를 통해 key값에 접근가능함

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

---

 

3.  2번처럼 map()을 사용해 배열을 렌더링하면  배열고유값이 설정 안되어 있어서 에러남

---

즉,  배열에 map으로 접근할때부터 고유값을 할당해주어야 함.

이유는 각 고유원소에 key가 있어야만 배열이 업데이트 될 때 더욱 효율적으로 렌더링 될 수 있기 때문임.

그래서 사전에 리엑트가 에러를 띄움.

  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} /> # 2번과 달리 user객체의 고유'key' user.id가 추가됨
      ))}
    </div>
  );

 

---

 

4. 만약 배열안의 원소가 id가 없는 경우 map()함수의 두번째 파라미터 index로 고유값 설정함

---

즉,  배열에 map으로 접근할때부터 고유값을 할당해주어야 함.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

---

 

5.  key의 존재유무 차이에 따른 업데이트 내부 작동원리 차이(3번 내용위한 심화설명 추가)

---

만약 배열 A에 [ 'a', 'b', 'c,' 'd']라는 원소가 담겨있다고 가정해봄.

이때 b와 c사이에 z 태그를 삽입해 리렌더링 하게 된다면?

 

case1. key가 없는 경우

보통은 <div>b</div> 와 <div>c</div> 사이에 <div>z</div>가 삽입될꺼라 예상함.

하지만 실재 리액트 내부에선 기존의 c가 z로 바뀌고, d는 c로 바뀐 후 맨마지막에 d가 새로 삽입됨

탐색시간이  즉이 K인덱스 위치에 따라 최악의 경우 O[N-K]  또는 최선의 경우 Θ[K]만큼 걸림

 

case2. key가 있는경우

우선 배열에 원하는 곳에 곧바로 삽입이 가능해짐. 키가 없는 경우의 과정을 안거치게 됨

즉 시간복잡도가 최악의 경우라도 O[1]이되므로 최대 N배 빨라짐

 

만약 a 원소를 삭제해 리렌더링 하게 된다면?

 

case1. key가 없는경우

a는 b로, b는 c로, c는 d로 바뀌고 맨마지막 d가 제거됨. 상당히 비효율적임을 느낌

탐색시간이  즉이 K인덱스 위치에 따라 최악의 경우 O[N-K+1]  또는 최선의 경우 Θ[K+1]만큼 걸림

 

case2. key가 있는경우

배열 원하는 곳에 그 즉시 삭제가 가능해짐.

하지만 key가 있으면 최악의 경우라도 O[1]이되므로 최대 N배 빨라짐

 

 

---