WIL 7/25 ~ 31

오늘 공부한 내용

props

먼저 props("properties"의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props 는 상속받는 컴포넌트 내에서 수정이 불가능하다. 리액트에서 부모 > 자식 일방향성 상속이라는 특징때문이다 .props 는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로'this.props,xxx'로 나타낸다.

• 읽기전용
• 부모요소에서 설정하는것
• 초깃값과 자료형의 유효성 검사가 가능

state

컴포넌트 상태를 나타내며 , props 와 반대로 변할수 있다 . 컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다. state 로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들 ( 리스트에서 선택된값 , 체크박스에서 체크된 값, 텍스트 박스의 텍스트 등등)

• 상태에 따라 변화하는것
• 직접 변경 가능
• state 가 변경되면 컴포넌트를 다시 렌더링 해야함
• 외부에는 비공개 , 컴포넌트 스스로가 관리 해야하는것

Props와 State 차이점

State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음.

Props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없음.

 

대표적인 3가지 리렌더링 조건

1. Props 변경 (=> properties의 줄임말)
2. State 변경
3. 부모 컴포넌트 렌더링

 

 1. Props 변경

• Props 업데이트가 일어나면 리렌더링을 한다.
• Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.
• 부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고, 모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

 

 

2. State 변경

• State 업데이트가 일어나면 리렌더링을 한다.
• 리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.
• 리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다.

 

 

3. 부모 컴포넌트 렌더링

• 부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.
• Props와 같은 원리이다.

공부하면서 느낀 점, 배운점

오늘 공부한 내용은 React 를 하기 위해선 필수적으로 알아야 하는 내용이다. 근데 솔직히 아직 정확히 다 이해하지는 못했다. 기능 구현을 많이 해보면서 계속해서 이해 하려는 노력이 필요할것 같다. 그리고 이번주 React 기본 주차를 해봤는데 산 넘어 산이다.. 자바스크립트 문법 할 때도 어려웠지만 이번이 더 어렵다. 언제쯤 익숙해질지 ..