3주차 WIL

1. props

 

2. State

 

3. 전체적인 데이터의 흐름 파악

지난 과제에서 Form 파일은 <추가하기> 버튼이 있는 컴포넌트였고

TodoList page 파일은 페이지에 필요한 모든 컴포넌트들을 모아서 합치는 곳이였다.

 

즉, TodoList가 사실상의 최상위 컴포넌트라고 봐도 무방하며,

(저 이미지에는 빠져있지만 TodoList page는 TodoList라는 함수로 싸여있다고 생각하자.)

따라서 global하게 사용해야하는 state가 있다면 이 곳에서 선언하는게 옳다.

 

위 이미지는 Form이 TodoList page로 부터 state를 받아

사용자에게 받은 input값을 저장 후에 다시 TodoList page로 돌려보내고,

Form으로부터 받은 이 state를 List, 즉 <추가하기> 버튼을 누르면 생성될 박스들이

놓여질 컴포넌트에 전달하는 과정을 담고 있다.

 

근데 여기서 걸리는 점이 하나 있다.

분명히 자식 컴포넌트가 부모 컴포넌트로 값을 전달하는 것은 불가능하다고 배웠기 때문이다.

그래서 우회적인 방법을 사용할 필요가 있다. 

지금부터 그 방법과 전반적인 흐름에 대해 설명해보고자 한다.

 

1. TodoList 컴포넌트에서 Form에게 bbbb라는 변수에 todos라는 State를 실어서 전달한다.(기본값 없음)
2. TodoList에서는 또한 cccc라는 변수에 saveTodo 함수를 실어 보낸다.
3. Form에서는 이를 props로 받는다.
4. Form에서, 사용자가 title에 input값을 입력하면 handleChange가 실행되고 그 안의 title State에 input값 저장.
5. 또한 사용자가 입력한 comment는 comment State에 input 값이 저장된다.
6. <추가> 버튼을 클릭하면 handleButton이 실행된다. 이 안에는 cccc, 즉 TodoList page에서 선언된 saveTodo함수안에 title State와 comment State를 넣으라는 명령이 들어있고 이 title,comment State에는 사용자가 입력한 input 값이 들어있다. 그렇게 되면, saveTodo 함수에 사용자가 입력한 title,comment가 들어가서 다시 TodoList page에서 실행되게 할 수 있다.( 이 부분이 제일 해맸던 부분 / 이런식으로 자식 컴포넌트에서 부모 컴포넌트로 전달이 가능하긴 하다.)
7. 값을 받아온 TodoList page의 saveTodo 함수에는 todos라는 state가 들어있다. 따라서 Form으로부터 전달받은 값들이 todos State의 초기값이 될 것이다.
8. input값들이 들어있는 todos State를 List 페이지에 넘겨서 사용한다. (추가하기 버튼을 누르면 생성될 박스들이 놓여질 컴포넌트)

 

여기서 주목할 건 3가지이다.

1. 자식 컴포넌트에서 부모 컴포넌트로 값을 넘기는 방법

2.State는 값을 저장하는 변수의 일종이라는 점.

(그래서 const가 붙어있음) 이 안에는 기본값으로 지정한 값을 저장해 놨다가 set State가 지정되면 

기본값을 삭제하고 변화된 값을 저장한다.

3.값을 주고 받는 흐름

 

이제 보니 별거 아니지만, 처음 접하면 당연히 어려울만 하다고 생각한다.

 

이번주 WIL은 위에 쓴 것을 끝으로 마칠려고 한다.

저 부분이 이번주에 배운 것의 정수라고 생각하기 때문이다.

다음주에 배울 Redux가 꽤나 어려운 주제라고 들었다.

두렵기 보다는 그냥 빨리 배우고 싶다. 그만큼 필요성을 뼈저리게 느꼈기 때문인 것 같다.