[React.js] data-driven react last

기존 DOM 요소(div, a, etc)에 props를 넘겨줄 수 있는가?
No! JSX로 작성된 기존 DOM 요소는 React가 실제 요소로 변경해서 사용하는데 기존 속성에 추가할 수 없기 때문입니다. 그렇기에 기존 DOM 요소에 props를 넘겨주고 싶다면, cusDiv와 같은 컴포넌트를 만들어서 사용해야 합니다.

Render Array

JSX 내부에 {}를 통해 JS 변수를 넣을 때 화면에 보이는 형태로 직접 렌더링 되는 데이터가 있습니다.

 

React Element, 문자열, 숫자 그리고 배열입니다.

 

배열을 {[1,2,3,4]}로 넣게 되면 화면에는 1234로 마치 배열을 join 해서 나온 결과처럼 보입니다. 여기서 중요한 사실을 배열이 화면에 보이도록 렌더링이 된다는 것입니다.

 

이와 React Element를 활용해 배열의 요소를 가지고 같은 형태로 중복되는 UI를 만들 수 있습니다.

export default function Test() {
  const arr = [{ name: 'nulzi', age: 21 },{ name: 'nulzi2', age: 22 },{ name: 'nulzi3', age: 25 }];
  
  return (
    <div>
 	  {
        arr.map(({name, age}) => {
          return (
            <div>
              <p>name: {name}</p>
              <p>age: {age}</p>
            </div>
          );
        }
      }
    </div>
  );
}

React를 사용할 때 데이터를 객체 배열에 담아서 준다면 쉽게 UI로 구현할 수 있습니다.

Key prop

위 코드와 같이 작성하면 UI는 잘 구현됩니다. 하지만 개발자 모드로 본다면 경고가 나와있는 것을 볼 수 있습니다.

 

바로 unique한 key prop이 필요하다는 경고가 말입니다.

 

배열과 map을 이용해 만든 요소들은 key가 있어야 React가 추론하고 각 요소를 구분할 수 있습니다. 그리고 구분할 수 있어야 배열 내의 요소들을 움직이거나 요소를 추가 또는 삭제할 수 있습니다.(실제로 key 없이 해도 경고만 뜨고 문제를 겪어본 적은 없습니다만...)

 

여기서 Unique한 key란

• 같은 배열로 만들어진 다른 형제 요소들과 같은 key를 가지면 안 됩니다.
• 또한 변하면 안 됩니다. 상수여야 한다는 말입니다.

그렇기에 key는 보통 데이터의 아이디를 사용하거나 데이터를 조합해서 유니크하게 만듭니다.

구분할 수 있는 무언가를 만들기 귀찮다고 배열의 index를 사용하면 안 됩니다!!!
배열의 index를 사용하는 경우는 배열의 요소가 고정되어 있을 때는 사용할 수도 있습니다. 하지만 배열의 index는 언제든 변경될 수 있는 위험이 있기 때문에 사용하지 않는 것을 추천합니다.

Spread object props

props로 객체도 전달할 수 있는데 객체로 전달하는 경우 props.obj로 접근해야 하고, destructuring을 사용해도 두 번의 과정이 필요하기 때문에 코드가 길어질 수 있습니다.

 

이를 위해 destructuring을 props를 내려주는 부분에서 사용할 수 있습니다.

export default function P() {
  const obj = { name: 'nulzi', age: 21};

  return (
    <div>
      <C
        {...obj}
        obj = {obj}
      />
    </div>
  );
}

export deafult function C(props) {
  console.log(props);
  // props { obj: { name: 'nulzi', age: 21}, name: 'nulzi', age: 21 }
  
  return ();
}

위와 같이 속성을 작성하는 부분에서 destructuring을 사용하면 자동으로 객체에 있던 요소가 props로 전달되고 바로 사용할 수 있습니다.

 

참고

https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

https://scrimba.com/learn-react-c0e