props 전송

[김민규]

우선 구조는 이렇습니다.    
 App.js> Loading.js

App.js > Main.js >Detail.js 

여기서 Loading의 state을 Detail 에 전송해주고 싶습니다.

그러려면 Loading> App > Main > Detail 이렇게 전송해줘야되는데 
우선 제가 로직을 잘못 짠건 맞지만 이걸 redux를 통해 해결하고 싶습니다.  

근데 redux는 읽기전용 상태여야 해서 디스패치를 통해 값변경을 해주어야 한다고 알고있는데  Loading에서 state은 input값을 onChange로 받아 setState(e.target.value) 해준 값입니다.

그 값을 최종적으로 Detail이란 컴포넌트에 전달해서 props로 받고싶은데 부족한 제머리로 강의를 봐도 redux를 통해 어찌 전달해주어야할지 모르겠습니다. 

검색 키워드를 주셔도 좋고 문제를 어찌 풀면 좋을지 설명 해주심 감사하겠습니다.

[codingapple]

1. redux 없이 하려면 일단 Loading의 state를 App에 보관하셔야합니다. 그 후 Loading에서 state변경함수를 이용해 그 state를 변경하면 됩니다. 그리고 그 state를 쓰는 곳이 있다면 거기까지 props로 전송하면 되겠군요. 

 

2. redux를 쓰려면

2-1. 일단 redux안에 입력값을 저장할 state를 하나 만들어둡니다.

2-2. 입력값 state를 어디선가 변경할거라면 우선 변경하는 법, 즉 reducer를 만들어야합니다.  

2-3. Loading.js 에서 <input>에 뭔가 작성할 때마다 dispatch() 함수를 실행시켜 reducer를 부르면 됩니다. dispatch 안에 <input>에 입력한 값같은걸 담고싶으면 담으면 되고요 

2-4. redux안의 state가 바뀌면 redux가 장착된 모든 컴포넌트에선 state 변경사항이 바로바로 반영됩니다. 

 

리덕스는 컴포넌트를 타고 뭔가를 전달하고 그런 식은 아니고 그냥 모든컴포넌트가 redux 파일에 있는 데이터를 직접 꺼내고 수정하고 그렇게 사용합니다. 

[글쓴이]

글