TIL 18일차

React State & Props에 대해 학습하는 날이다. 양이 많길래 전날 밤 미리 좀 읽어둔것이 도움이 되었다. 개념은 이해하기 쉬웠지만 적용하는것이 어색하고 어려웠다. 그래서 페어와 함께 과제를 수행하는 시간에도 서로 버벅이다 결국 페어시간 이전에 학습했던 연습문제를 함께 풀어보는 시간을 가졌다. 연습문제를 풀어보니 아주 조금? 감을 잡을 수 있었다. 주말 그리고 추석연휴 동안 리액트 과제를 다시 풀어보며 공부해야겠다. 

 

Props

1. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.

2. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 

3. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.

4. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체가 되었다. 함부로 변경되지 않아야 하기 때문이다.

 

읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props 를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙에 위배된다.

 

How to use props

props를 사용하는 방법은 3단계 순서로 나눌 수 있다.

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

 

State

state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이다. 실제 애플리케이션에서는 무엇이 "상태"라고 할 수 있을까? 쇼핑몰 장바구니를 예로 들어면 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태이다. 상태는 React state로 다뤄야 한다.

 

 

Today's Key🔑

• props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체가 되었다. 함부로 변경되지 않아야 하기 때문이다.
• React state는 상태 변경 함수 호출로 변경해야 한다. 강제로 변경을 시도하면 안 된다.
• State & Props 사용법이 익숙해질 때까지 여러가지 방법으로 사용하여 적용시켜보는 연습을 해야겠다.