아 그거 뭐였지

리액트 렌더링 최적화에 대해 ARABOZA... 리액트 렌더링 최적화에 대해 알고있다고 생각했지만 설명해보라고하면 쉽사리 입이 떨어지지않는다. 이번기회에 한번 제대로 알아보고 가자 렌더링 최적화에 대해 알아보기전 리액트에서 렌더링 된다는 것은 무엇을 의미할까? 간단하게 의미만 살펴보자면 함수가 호출되면 함수는 내부 로직을 실행하고 리액트 element들을 반환한다. 이것이 리액트에서의 렌더링이라고 볼수있다. 호출되면 a라는 변수에 a값을 할당하고 렌더링 이라는 리액트 element를 반환한는 짧은 함수이다. function App(){ const a = "a" return 렌더링 } 렌더링 최적화에대해 예시코드를 가져왔다. function Parent() { const [changeValue,setCha..

기술면접스터디를 진행하면서 발표자료 정리한것을 올려본다. 마운트란? DOM 객체가 생성되고 컴포넌트가 브라우저에 나타나는 것 언마운트란? 화면의 렌더링된 컴포넌트를, 삭제하기 까지의 과정 애플리케이션에서 리소스를 확보하기위해 사용하지 않는 컴포넌트의 리소스를 회수하기위해 클래스형 컴포넌트 언제 리렌더링이되는지? 새로운 props값을 받았을때 state값이 변경되었을때 부모 컴포넌트가 리렌더링됐을때 (props값이 변경되지않아도 부모컴포넌트가 리렌더링되면 자식컴포넌트도 리렌더링됨) forceUpdate가 실행될때 (권장하지않음, state와 props외의 값에 의존하기때문) forceUpdate: props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고싶을때사용 https://projec..

위와같은 구조를가진 A 라는 컴포넌트에 변수 num이 존재하고 해당 num을 자식 컴포넌트인 Component G에서 값을 바꾸기 위해서는 Component A에서 props로 B로 전달하고 그 props를 C로 전달 D로전달.... 하면서 G까지 전달해야 할것이다. 이렇게만 봐서도 끔찍한 구조인데 극단적으로 만약 컴포넌트의 깊이가 100개이상이라면? props를 타이핑하다가 하루가 끝날것이다. 이러한 문제점을 Props Drilling 이라고 하며 이를 해결하기위해 props.children을 사용하거나 전역상태관리 라이브러리인 Recoil, Redux, Mobx 혹은 React 훅 useContext 를 사용하여 해결할수있다. 이중에 하나인 Recoil을 사용해서 상태관리를 해볼것이다. Recoil ..

Q. 드래그앤드랍 만들어주세요. 드래그앤드랍? 라이브러리 써서 하면 금방 뚝딱아닌가 라고 자만했던 과거의 나에게 엄벌을 내려주고싶다. 개발할때 자만은 죄악이다. 언제나 겸손하도록 하자. 앵귤러만 사용하다가 리액트로 사용하려다보니 막히는 부분이 많았다. 하지만 덕분에 공부가 많이돼서 재밌었다. 야무지게 다운로드 부터 먼저 해주도록 하자 # yarn yarn add react-beautiful-dnd # npm npm install react-beautiful-dnd --save 공식문서를 보면 드래그 앤 드랍을 작동시키기 위해선 크게 DragDropContext와 Droppable, Draggable이 있는데 DragDropContext는 드래그 앤 드랍을 사용하기위한 영역을 지정해주는것이고 Droppab..

Q. 로그인 완료되면 메인페이지로 이동해주세요 리액트로 로그인 기능 구현하던중 로그인이 완료되면 메인 페이지로 페이지로 이동하고싶었다. 검색해보니 useHistory를 사용하면 된다해서 사용했다가 이제는 useNavigate로 바뀌었다고 해서 적용해보았다. 사용하기전에 react-router-dom 을 설치하여야 한다. npm i react-router-dom //타입스크립트 사용한다면 밑에도 설치 npm i @types/react-router-dom 사용방법은 useHistory보다 간단해졌다. useNavigate('경로') 이렇게 경로만 적어주면 된다. 바로 코드로 알아보자. import { useNavigate } from "react-router-dom"; // useNavigate를 사용하기위..

Q. localhost:3000/auth/login 해당 url처럼 auth뒤에 login으로 가게 해주세요. Angular에서는 중첩라우팅을하고싶으면 RouterModule.forRoot에 걸린 컴포넌트에서 RouterModule.forChild를 하면 중첩 라우팅이 가능한데 리액트에서는 어떻게 하는지 궁금해서 찾아보았다. 리액트는 최상단 파일에서 BrowserRouter로 컴포넌트들을 감싸고 중첩라우팅을 할 주소 뒤에 *를 붙여서 해당 주소로 시작하면 무조건적으로 원하는 컴포넌트로 접속이 될수있도록 라우팅을 시켜버리는것같다. 여기서 주의할점은 BrowserRouter는 최상단 파일에서 한번만 사용하고 자식 파일들은 Routes만 사용해야한다는점이다. 바로 코드로 확인해보자. 먼저 최상단 파일에서 라우..