WIL Week 04 [7월 둘째 주] : State, props, 리렌더링 발생 조건

◈ 이번 주 나에게 어떤 일들이 있었는가...

 

   react 숙련 주차 강의를 마무리하고 레벨 2 과제에 돌입했다. 레벨 2 과제는 저번 주와 똑같은 My Todo List를 만드는 것이었지만 이번에는 redux와 route-DOM를 사용해서 UI들을 완성하고  새로운 페이지로 이동해서 todo list의 id, 제목, 내용을 화면에 띄워주는 과정이 추가된 과제였다. 페어를 통해 redux와 route-DOM을 어떻게 활용해야 할지 고민하며 해결해 나간 한 주였다.

 

 

 

◈ 이번 주 나는 어떤 감정을 느꼈나...

 

   과제를 이어나가는 동안 정말 내가 해결할 수 없는 거대한 벽을 만난 느낌이었다. 분명 같은 강의를 들었음에도 남들은 금방 해결해나가는 것처럼 보인 것과 다르게 나는 눈 앞의 작은 에러조차 어찌할 바를 모르고 있었기 때문이다.

하지만 한 주가 지나고 과제를 결국 모두 마치고 제출하고 나니 역시나 해결이 불가능한 문제는 없다는 것을 새삼 다시 한 번 깨닫는 일주일이었다.

 

 

 

◈ 이번 주 나는 어떤 것을 배웠나...

 

   저번 주 어렴풋이 배웠던 키워드인 state와 props를 조금 더 확실하게 알아갈 수 있었다.

• State : state는 컴포넌트 내에서 바뀔 수 있는 값을 의미.
• props : properties를 줄인 표현, 컴포넌트 속성을 설정할 때 사용하는 요소.

state와 props 둘 다 부모 컴포넌트에서 설정하는 값이다. 이 둘의 차이점이라고 한다면 state는 컴포넌트 내에서 관리하지만 props는 다른 컴포넌트에 전달되는 방식이란 점이다.

 

또 하나 배운 것이 있다면 리렌더링의 발생 조건에는 3가지가 있다는 것.

1. props가 변경 될 때,

2. State가 변경 될 때,

3. 부모 컴포넌트가 렌더링 될 때,

 

 

◈ 배운 것을 바탕으로 앞으로 어떻게 적용해 나갈 것인가...

 

   핵심적인 hook 종류 중 한 가지인 useState는 무분별하게 사용할 경우 리렌더링에서 문제가 발생할 수 있기에 useState의 특성을 조금 더 공부해 이런 문제를 줄일 수 있는 코딩에 대해서 고민해나가야할 것이다.