React | State 사용하기 (+ 리스트와 key)

State 값 설정(초기화)

State값의 초기값을 설정할 때는 constructor를 이용해야 하며, 이 부분에서 props의 값도 전달받는다!

※ 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 함

 

App이라는 상위 컴포넌트에서 Pagetitle이라는 하위 컴포넌트에 state값을 전달

 

 

 

Pagetitle 컴포넌트에서 state값 사용

 

 

 

출력 결과

 

 

 

 

+) 리스트와 key

 

여러 엘리먼트를 전달 할 때는 배열 형식으로 엘리먼트 모음을 만든다.

 

pacers라는 이름의 배열 안에 여러 객체 정보를 저장하여 players라는 props에 담아 전달

 

 

 

 

 

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

 

 

 

리스트에 담긴 내용이 잘 출력된 모습

 

 

 

 

+) 참고한 공식문서

State and Lifecycle – React