Oct 5, 2021 - react 관련 필기

*10월5일

-프론트 관련 일부 업무를 병행하게 되었다. HTML, CSS 베이스 프론트는 많이 접했었지만, REACT는 생전 처음으로 코드 한줄 마다 console.log 하나씩 치면서 겨우 일부 이해를 했다. 다행히 삽질한 시간 만큼 조금씩 익숙해지고 있어서 다행이다.

-주말 중 REACT 관련 강의를 하나 듣고 개념을 좀 더 확실히 잡아야겠다.

 

 

*기본

-this.setState 통해서 주로 컴포넌트 변경 진행함

-useeffect()는 마운트 이후 state가 바뀌면 실행함

-render()는 최종 정리된 값들을 페이지 상 구현하는 역할을 함

-componentWillUnmount()는 특정 페이지에서 나갈 때. 즉 더이상 해당 컴포넌트를 사용하지 않고 나갈 때 발생함.

-componentWillReceiveProps(nextProps) : 컴포넌트 생성후에 첫 렌더링을 마친 후 호출되는 메서드다. 컴포넌트가 처음 마운트 되는 시점에는 호출되지 않음. props를 받아서 state를 변경해야 하는 경우 유용함

-componentDidUpdate에서 네트워크 관련 처리

 

*Redux

-react component는 tree 구조로 이루어져 있는데, 아래쪽 브랜치에 접근하려면 맨 위에서부터 다 거쳐서 가야함. 따라서 redux라는 임시 저장소가 생겨났고, 여기에 전역으로 필요한 값들을 저장함!!

 

*생명주기

-컴포넌트가 처음 실행 될 때 그것을 mount라고 함. 컴포넌트가 시작되면 우선 context, defaultProps, state를 저장함. 그 후 componentWillMount 메소드 호출 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됨.