[TIL] 엘리스 SW 엔지니어 트랙 Day 050

📖 오늘 배운 내용 - 2021.12.31

• Props
• State

 

📝 Props

[React] 리액트 Props란?

 

📝 State

[React] 리액트 State란?

 

📝 이벤트 처리

[React] 리액트에서 이벤트를 다루는 방법

 

📝 생명주기

[React] 리액트 생명주기란?

 

📝 리액트 클래스형 컴포넌트 setState 사용 방법

[React] 리액트 클래스형 컴포넌트 setState 사용하기

 

📝 클래스 컴포넌트에 이벤트 정의

[React] 리액트 클래스 컴포넌트에 이벤트 정의하기

 

📝 Key

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>/*li태그에 직접 key값을 부여*/
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

• 여러 가지 컴포넌트가 동시에 렌더링이 되기 때문에 컴포넌트를 구분하기 위해서는 key값이 필요하다.
• 리액트의 입장에서 key값을 통해 구분할 수 있다.
• key는 string값을 가지는 props다.
• key는 형제 사이에서 고유한 값이어야 한다.
  • 페이지 내의 모든 key값이 독립적일 필요는 없다.
• key는 주변 배열의 context에서만 의미가 있다.
  • key의 값은 동일한 리스트 엘리먼트 내에서만 유효하다.
• 따라서, 태그마다 유니크한 key값을 주어야 한다.

 

const todoItems = todos.map((todo) =>
//<li>의 key값으로 todo.id라고, id값을 부여한 것을 확인할 수 있다.
  <li key={todo.id}> 
    {todo.text}
  </li>
);

• key는 리스트의 각 아이템이 추가되거나, 수정, 삭제될 때 리액트의 입장에서 빠르게 알아차릴 수 있도록 도와주는 역할을 한다.
• 가장 좋은 key값을 부여하는 방법은 다른 엘리먼트들과 다른 UNIQUE 한 string값을 부여하는 것이다.
• 대부분, 데이터의 id값을 key값으로 부여한다.
• index값을 키로 사용할 수 있지만, 성능 저하 or 컴포넌트의 state와 관련한 문제가 발생할 수 있다. 따라서, 명시적으로 id값을 적는 것이 좋다.

 

const todoItems = todos.map((todo, index) =>
  // index를 이용하여 key값 부여하기
  <li key={index}>
    {todo.text}
  </li>
);

• 만약, 변하지 않고 고정적인 key 값을 부여하는 것이 정말! 어렵다면 index를 사용하여 부여한다.
• 하지만, 그럴 경우 문제가 생길 수도 있다. array 내 아이템의 순서가 바뀔 수도 있기 때문이다.

 

💡 오늘 깨달은 것

• Props는 컴포넌트에 전달되어 사용되는 반면 State는 컴포넌트 안에서 관리된다.
• Props는 함수의 매개변수처럼 사용되는 것이고 State는 함수 내에 선언된 변수처럼 사용되는 것이다.
• Props와 State의 가장 큰 차이로 Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 자식 컴포넌트에서는 Props를 직접 수정할 수 없지만 State는 컴포넌트 내부에서 선언하며 내부에서 관리되는 값으로 값을 변경할 수 있다는 점이 있다.
  • 따라서 값이 변경되어야 하는 상황, 예를 들면 매초 변하는 시간을 출력해야 하거나 버튼 클릭 시 값이 변하는 것을 출력해야 한다면 State를 사용해야 한다.
  • 즉, Props는 읽기 전용으로 수정이 불가능하고, State는 원하는 경우 수정이 가능하기 때문에 상황에 따라 알맞은 것을 사용!
• 비동기적이란 일정 주기마다 변경되는 것이 아닌, 특정 이벤트를 통해 변경되는 것을 의미하며 예를 들어 버튼 클릭 같은 것을 말한다.

 

📌 참고

• Index as a key is an anti-pattern
• 재조정 (Reconciliation) - React