Pandaman Blog

클래스형 컴포넌트를 함수형 컴포넌트로 변경하는 작업을 진행하면서 이전 상태를 알아야 하는 경우가 발생했다. react 공식 문서에서 확인해보면 아래와 같은 예제를 통해 알려주고 있다. function Counter() { const [count, setCount] = useState(0); const prevCountRef = useRef(); useEffect(() => { prevCountRef.current = count; }); const prevCount = prevCountRef.current; return Now: {count}, before: {prevCount}; } 해당 코드를 다시 Custom Hook으로 변경 가능하다. function Counter() { const [count, ..

React Hook은 상태 로직의 재사용성을 높이고, class 형태의 React Component의 복잡도를 낮추기 위해 만들어졌습니다. Hook을 사용하면 class형 컴포넌트에서 사용하던 lifeCycle에 대해 달달 외우지 않아도 됩니다. 코드의 로직을 이해하면서 상태을 눈으로 쉽게 파악할 수 있습니다. 우리는 React에서 기본적으로 제공하는 Hook이 무엇이 있는지 확인해보고, 재활용은 어떻게 할 수 있는지 확인해보는 시간을 갖도록 하겠습니다. useState useState는 class형 컴포넌트에서 사용하는 setState 함수와 비슷한 역할을 합니다. useState의 두 개의 요소를 리턴합니다. 첫 번째 요소는 현재 상태, 두 번째 요소는 그 상태를 갱신할 수 있는 함수를 리턴합니다. ..

Redux toolkit은 Redux를 좀 더 편리하게 사용할 수 있도록 만들어진 라이브러리입니다. 사용방법도 매우 간단합니다. 이전 포스팅에서 만들어본 todoList를 Redux toolkit에서 제공하는 함수를 사용해보겠습니다. 설치 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit configureStore createStore 함수와 동일하게 루트 리듀서 함수를 호출하여 리덕스 스토어 생성하는 역할을 합니다. configureStore는 인자로 object를 받으며 아래와 같이 작성할 수 있습니다. // 이전 const store = createStore(rootReducer, devTools); // 이후 const sto..

TodoList 만들기 이전 포스팅에서 Redux의 3원칙을 간단하게 학습했다. 오늘은 3가지 원칙을 활용해 TodoList를 만들어 리덕스를 이해해보자. Redux 설치 예제를 시작하기 앞서 Redux와 React-Redux 설치가 필요하다. 터미널에 아래와 같이 입력한다. npm install --save redux 또는 yarn add redux 그리고 리액트 애플리케이션에서 Redux의 사용을 편리하게 할 react-redux도 설치하자. react-redux는 redux와 react 컴포넌트를 연동하여 store에 저장된 상태를 props로 전달하도록 도와준다. npm install --save react-redux 또는 yarn add react-redux Directory 구성 index.j..

Redux란? Redux는 javascript application을 위한 예측 가능한 상태 컨테이너이다. 리덕스는 상태를 단일 저장소에 저장한다는 아이디어에서 출발한다. 단일 저장소에 저장한다면 큰 이점이 있을까? Single source of truth 각 컴포넌트가 상태를 업데이트하기 위해 setState 함수를 호출하여 state 업데이트한다. 컴포넌트가 많을수록 state가 업데이트된 이유를 알기 위해 컴포넌트 트리를 추적한다. 이러한 과정은 개발의 효율성을 매우 떨어트린다. Redux는 단일 저장소에 상태를 저장하여, 상태 관리를 단순화시켜준다. State 읽기 전용 state는 읽기 전용이다. 그렇다면 어떻게 상태를 갱신할 수 있을까? state를 변경하기 위해서는 명령이 필요하다. 이를 리..

목차 1. 마운트 생애주기 API 2. 갱신 생애주기 API 컴포넌트 생애주기는 컴포넌트가 마운트 되거나 갱신될 때 호출되는 일련의 메서드로 이루어진다. 컴포넌트 생애주기 메서드는 렌더링 전, 후로 호출된다. 컴포넌트 생애주기 메서드를 알아야 하는 이유는 우리가 React를 효과적으로 사용하기 위해서다. 왜 효과적으로 사용할 수 있는지는 설명과 예제를 통해서 이해할 수 있다. 컴포넌트 생애주기는 크게 마운트 생애주기와 갱신 생애주기로 나눌 수 있다. 마운트 생애주기 API 아래는 마운트 생애주기에 따라 호출되는 API 알아보기 위한 예제이다. import React from "react"; export default class App extends React.Component { constructor(p..

목차 1. state란? 2. setState 3. 이벤트 설정 오늘은 리액트 프로젝트를 진행하면서 필수적이고 기본적인 객체인 state와 함수 setState에 대해 알아보겠습니다. state란 state란 렌더링 결과물에 영향을 주는 정보 리액트 공식 홈페이지에서는 state에 대해 위와 같이 말합니다. 즉, state는 컴포넌트가 마운트 될 때 기본값을 갖게 되고, 우리는 이 state를 활용해 데이터를 변화시켜줄 수 있습니다. 아래의 예제를 살펴보겠습니다. 참고로 아래의 App.js는 ReactDom.render 함수에 첫 번째 인자에 전달될 컴포넌트입니다. import React from 'react'; export default class App extends React.Component { ..

React Router React와 같이 단일 페이지 애플리케이션(Single Page Application)에서 React router를 통해 새로고침이나 깜빡임 없이 사용자가 원하는 페이지를 탐색할 수 있도록 도와주는 라이브러리입니다. 비록 페이스북에서 제작한 공식 라이브러리는 아니지만 가장 많이 사용되고 있는 라이브러리입니다. https://github.com/ReactTraining/react-router 리액트 라우터 사용 리액트 라우터를 사용하기 위해 npm 또는 yarn 를 통해 react-router-dom를 설치합니다. 12$ yarn add react-router-dom$ npm install react-router-domcs 리액트 라우터 컴포넌트 리액트 라우터 컴포넌트에는 다양한 컴..