한번에끝내는React의모든것초격차패키지Online
패스트캠퍼스 챌린지 9일차 - 리액트 컴포넌트 생명주기
리액트의 컴포넌트 생명주기는 굉장히 유명한 도표로 한눈에 알수있다. 이 도표는 클래스 컴포넌트에 맞게 표기되어있고 강의 또한 리액트 공식문서에 나와있는대로 클래스 컴포넌트를 기준으로 설명한다. 요즘 강의를 들으면서 vscode 세팅이 귀찮을거 같아서(CRA를 이용한 세팅) repl.it을 이용하고 있는데, 클래스 컴포넌트의 this에 대한 특이점을 설명해 주었는데, 그것을 좀더 쉽게 arrow-function을 이용하면 binding을 따로 하지 않아도 해당 클래스 내의 함수인 것을 인지한다는 내용의 코드를 적용했더니 @babel/plugin-proposal-class-properties 를 install 해야된다는 에러가 떠서 install 했는데 제대로 작동하지 않아 강의로 의미만 설명듣고 넘겨버렸다..
패스트캠퍼스 챌린지 6일차 - 리액트 상태 끌어올리기, 데이터 fetch하기
See the Pen state lifting by BEGINNERWW (@beginnerww) on CodePen. State 끌어올리기 형제컴포넌트가 존재하고 어떠한 액션을 취할때 형제컴포넌트의 state(값, 데이터 등)이 필요할 때, 해당 상태값을 각각의 컴포넌트 내에서 관리하는 것이 아닌 부모컴포넌트로 lifting up 하여 관리하는 것을 말한다. 단순한 구조(연관된 컴포넌트가 몇 되지 않을때)일 경우 lifting up(상태를 부모가 관리), Props drilling(props를 자식 컴포넌트로 하달)을 함에 있어 큰 문제가 되지 않으나, 과도할 경우 어디서 전달되어온 값인지 추적하기가 어려워져 유지보수에 문제가 생긴다. 이를 보완하기 위해 Context Api나 상태관리 라이브러리(red..
패스트캠퍼스 챌린지 2일차 - 리액트의 리렌더링
오늘은 리액트의 리렌더링에 대한 내용과 이벤트 핸들링에 대해 공부하였다. 리액트의 장점 으로 많이 화자되는 것 중 리렌더링에 대한 부분이 있다. 리액트는 가상돔을 통한 컴포넌트 비교로 변경된 내용을 파악하고, document 전체를 리렌더링하는 것이 아니라 변경된 내용이 사용되는 컴포넌트만 리렌더링한다. 이는 웹개발에 있어서 성능 최적화와 직결되는 장점이다. 성능 최적화하면 리플로우(reflow), 리페인트(repaint)의 개념을 알아야된다. 브라우저가 동작할때 리플로우는 배치, 리페인트는 그리기에 해당하는데, 리플로우는 플로우작업(DOM트리 + css/javascript 를 합쳐주면서 해당 돔요소의 크기와 위치에 배치하는 것)을 다시 하는 것을 의미한다 렌더트리를 기반으로 화면을 그리는 작업을 다시 ..