나만의 작은 코딩

리덕스(Redux) 상태 관리의 필요성 애플리케이션 상태 관리(Maniging States)는 버그를 최소화하면서 잘 만들어진 UX를 유저에게 제공하는 데 절대적으로 중요하다. 또한 오늘 날 프론트 엔드 어플리케이션 제작에 있어 가장 어려운 부분 중 하나이다. Redux가 없이 React를 사용했을 때 불편했던 점 : 1. [state] 공유 불가능 2. 부모 컴포넌트에서 자식 컴포넌트에게만 props를 넘겨 줄 수 있음(일발통행) 3. 프로젝트가 커질 수록 넘겨줘야 하는 state가 많아지는데 이는 너무 복잡하고 번거로움! (관리가 힘듬) Redux는 애플리케이션의 상태를 관리하기 위한 견고하고 안정적인 솔루션을 제공한다. 여기 저기 혼란스럽게 흩어져 있는 state들을 체계화 하여 애플리케이션을 관리..

React-router는 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 이때 사용하는 유용한 hook과 component들을 정리해보자 사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있게 해주는 요소이다. 원래 웹페이지 에서는 링크를 보여줄 때 태그를 사용하지만 a태그는 클릭시 페이지를 불러오기 때문에 사용하지 않는다. 컴포넌트는 생김새는 태그를 사용하지만 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다. import { Link } from "react-router-dom"; 해당 컴포넌트에 import를 해주고 링크명 단순히 클릭하면 바로 페이지를 이동할 때는 Link를 써주면 편하다 하지만 조건문이 들어가야 하거나 함수 안..

1. 라우팅이란? 지금까지는 단일 페이지의 앱을 만들었다. 하지만 우리가 아는 대부분의 웹/앱은 여러 페이지가 있고 페이지를 이동할 수 있다. React는 SPA(Single Page Application)방식으로 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 즉 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에 내용을 바꿔치기 해주는 라이브러리 라고 볼 수 있다. 2. 리액트 라우터(React Router) 1) 종류 사용자가 입력한 주소를 감지하는 역할, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. ex) BrowserRouter, HashRouter - Bro..

React LifeCycle 위 사진은 클래스형 컴포넌트에서 사용하는 생명주기 메서드입니다. 하지만 현재는 클래스형 컴포넌트보다 함수형 컴포넌트를 더 많이 사용하고 있습니다. useEffect()함수와 같은 리액트 Hook 덕분에 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 함수형 컴포넌트에서도 사용할 수 있게 되었습니다. - componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친후 실행. - componentDidUpdate: 리렌더링을 완료 후 실행. 즉 render()가 업데이트 될 때마다 실행. - componentWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행. useEffect()란? React component가 렌더링 될 때마다 특정작업(Side effe..