- FilterableProductTable이 어떻게 화면이 렌더링되는지?
state가 변하면 component가 re-render 된다.
data model에 변화가 생긴 후 ReactDOM.render() 함수가 호출되면 UI가 새로 업데이트 된다. - Todolist에서 todos 들을 왜 state로 놔두는지?
todos 안의 각각의 todo들은 추가되거나 삭제, 수정될 수 있다.✍🏼 배운 것 : React의 state, props
- 어디에 정확히 state, props를 둬야하는지 아직 잘 모르겠다. 여러 예제들을 보고 짜집기해본 결과 잘 실행되긴 하나 거의 모든 component에 state를 만들어 놓았다.....ㅎ;
✍🏼 배운 것 : App의 State는 최소한으로 만들자
앱을 제대로 빌드하기 위해서 최소한의 state만 구현하는 것이 좋다. 여기서 포인트는 DRY: Don't Repeat Yourself. 만들고자하는 어플리케이션에 최소한의 state만을 생각하고 필요할 때 그걸로 원하는 것을 계산해라. 예를 들어, TODO list를 만든다면 TODO item들을 array로 가지고 있고 카운트에 대한 state로 만들지 마라. 카운트 숫자를 새롭게 render하고 싶으면 TODO items array의 length를 가져다 써라. Thinking in React, Step 3 : Identify The Minimal (but complete) Representation Of UI State
state를 어디에 놔둬야하지 ?
- state에 따라서 렌더되야하는 컴포넌트들 확인해라.
- 그 컴포넌트를 가지고 있는 owner component를 찾아라.
- 컴포넌트를 가지고 있는 owner 컴포넌트나 hierarchy 상 위에 위치한 다른 component가 state를 가져야 한다.
- 만약 어디에 state를 넣을지 모르겠다면, 해당 state를 그냥 가지고 있기만 한 새로운 component를 만들고 공통 컴포넌트 위에 넣어라.
Step 4: Identify Where Your State Should Live- componentDidMount는 컴포넌트가 DOM에 mount 된 후 일어나는 method이다. 컴포넌트 주기 동안 딱 한번만 실행된다. 데이터를 가져오기(fetch) 위해서는 lifecycle component를 사용해야한다.
✍🏼 배운 것 : React의 component 주기
componentWillMount -> render -> componentDidMount
render method에서 가져온 data를 자식 component의 props로 전달하여 화면에 그랴지게됨
- axio promise를 사용하기 때문에 .then으로 체인을 연결해서 response를 처리해줄 것이다. 컴포넌트의 state는 새로운 products, musics의 array로 this.setState 호출하면서 update된다. 다시 render되고 products들이 보여지게 된다. 참고 : ajax-requests-in-react
socket, componentDidMount
componentDidMount에 socket.on('new music', callback)을 붙였는데 Memory Leaks, componentWillUnmount 어쩌고 오류가 떴다. 찾아보니 componentWillUnmount에 socket에 붙인 event를 다 제거하라고 되어있어서 그대로 했더니 해결되었다. 🧐
아직 무슨 의미인지는 이해 못함
- Stop Memory Leaks with componentWillUnmount Lifecycle Method in React
- componentWillunmount에서 socket.removeAllListeners
다음 task
DJ에게는 MusicInputForm에서 select 버튼이 보이지만 user에게는 안보임
