본문 바로가기

React

(11)
클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전 요즘 React를 사용하는 개발자들은 함수형 컴포넌트를 많이 사용한다. 나 역시도 클래스형 컴포넌트를 작성해본 기억이 거의 없다. 그렇다면 리액트 개발자들은 클래스형 컴포넌트를 왜 만들었을까? 처음부터 함수형 컴포넌트만 사용하지? 🤔 ㅎ ㅎ 앞으로 몇 개의 글에 걸쳐서 리액트 사용법이 어떻게 발전되었는지에 정리해보려 한다. 리액트가 등장했을 초반에는 함수형 컴포넌트보다 클래스형 컴포넌트가 훨씬 더 인기를 끌었다. 왜일까? 클래스형 컴포넌트는 상태를 가질 수 있다 함수형 컴포넌트는 말 그대로 함수이다. 그리고 함수는 한번 호출되면 return과 함께 바로 종료되기 때문에 다시 호출할 수 없다. 물론 새로 호출은 가능하다. 함수 내에 변수를 선언하면서 상태를 가질 수는 있다. 하지만 이 상태의 생명주기는 함..
CRA없이 React 프로젝트 구성하기 with Javascript 1. yarn 설치 yarn init 2. React 설치 yarn add react react-dom 3. Webpack 설치 yarn add -D webpack webpack-cli npx webpack init 4. Babel 설치 yarn add -D @babel/core @babel/preset-react @babel/preset-env 5. webpack.config.js 수정 devServer: { hot: true, //추가 open: true, host: "localhost", }, ... module: { rules: [ { test: /\.(js|jsx)$/i, loader: 'babel-loader', options: { presets: ['@babel/preset-react', '..
useMemo vs useCallback vs React.memo useMemo useMemo는 memoized된 값을 return하는 hook이다. 인자로 함수와 의존성 배열을 받는데, 두번째 인자로 준 의존 인자 중에 하나라도 변경되면 값을 재계산한다. 만약 의존 인자로 아무것도 전달되지 않는다면, 렌더시마다 항상 값을 새롭게 계산하여 return한다. 따라서 컴포넌트를 렌더링 할 때마다 값을 매번 계산하지 않고, 경우에 따라서만 재계산한다. 이를 통해 매 렌더시마다 소요되는 불필요한 계산을 피할 수 있다. import React, { useMemo } from 'react'; import { sum } from './util'; const Calculator = ({v1, v2}) => { const value = useMemo(() => sum(v1,v2), [..
Redux 리덕스란 상태 관리 라이브러리입니다. 리덕스를 사용하면, 컴포넌트 내에 상태들을 글로벌하게 관리할 수도 있고, 파일로 따로 모아서 상태를 관리하면서 더 효율적인 상태관리를 할 수 있습니다. 즉, 모든 컴포넌트들이 쉽게 하나의 상태를 공유할 수 있습니다. 개인적으로는 어떠한 상태를 읽는 컴포넌트와 상태에 변화를 주는 컴포넌트가 서로 다른데, 트리 구조상 서로 멀리 있을 때 글로벌하게 상태를 관리할 필요가 있다고 느끼는 편입니다 : ) 왜냐하면 두 컴포넌트는 서로 연결되어있지 않기 때문에, 두 컴포넌트를 연결할 수 있는 부모 컴포넌트에서 해당 상태를 가지고 있어야 하고, 이는 앱의 규모가 크고 트리의 구조가 깊다면 엄청난 props drilling을 발생시킬 수도 있기 때문입니다. Dispatch() 디스패..
State vs Props 리액트에서 컴포넌트의 상태를 관리하는 방법은 크게 2가지다. 하나는 변경할 수 있는 상태를 다루는 것이고 → state 하나는 변경할 수 없는 상태를 다루는 것이다 → props props와 state의 구분하기 전에 공통점부터 알아보자면 props와 state는 Javascript의 일반 객체이다. props와 state는 화면의 렌더링을 발생시킨다. Props(Properties) Props의 가장 큰 특징은, 부모 컴포넌트로부터 내려오는 상태라는 것이다. 따라서 props는 읽기 전용(read-only)이고, 이 특성을 위해서 리액트는 자바스크립트의 Object.freeze() 메서드를 사용하여 props를 읽기 전용 데이터로 만든다. 특정 상황에서는 props가 부모 컴포넌트로부터 안 내려오면, ..
Immutable이란? 리액트에서는 setState() 함수를 통해서만 state를 update 하는데, 이때 기존의 상태(객체)의 값을 직접 수정하면 안 된다. 즉, 리액트에서 state는 생성된 이후에 다시는 그 상태를 변경할 수 없다. 그 이유는 setState나 hook의 setter함수를 통해 상태를 변경하지 않으면 리액트는 상태의 변경을 감지하지 못해서 리렌더링을 하지 않기 때문이다. 이때 리액트에서는 상태를 immutable 하게 관리하라고 한다. 🤔 리액트의 상태가 immutable 하면 어떤 점이 좋을까요? 의도치 않게 특정 객체가 변경되면, 해당 객체를 참조하던 객체의 값이 같이 변경되는 side effect를 낮출 수 있다. 이에 따라 디버깅이 쉬워지고 프로그램 복잡도가 낮아진다. prevState와 nex..
제어 컴포넌트 vs 비제어 컴포넌트 리액트로 폼을 다루는 방법은 크게 두 가지가 있다. 바로 제어 컴포넌트와 비제어 컴포넌트이다. 우테코 강의 시간에서도 두 방식에 대해 크루들과 코치들이 같이 논의하는 시간을 가졌던 기억이 있다. 그런데 그때에 잘 이해하지 못 한 부분이 많았어서 오늘 한 번 정리해보고자 한다. 참고로 나는 제어 컴포넌트를 선호하는 편인 것 같다 ㅎ ㅎ 이유는 흠,,,,아무래도 나는 리액트에서 ref의 사용을 지양하고자 하는 생각이 있어서 자연스레 제어 컴포넌트를 통해 폼을 구현하는 편인 것 같다. HTML Form 엘리먼트는 그 자체가 내부에 상태를 가진다. 이 특성에 의해 폼을 다루는 두 가지 방법이 존재할 수 있다. 미리 정리해보면, 폼 엘리먼트가 가지는 상태를 그대로 사용하는 것이 비제어 컴포넌트이고, 중간에 Rea..
Key KEY? 왜 사용해야 할까? Key는 컴포넌트 배열을 렌더링 할 때 어떤 element에 변화가 있는지 알아내기 위해 사용하는 값이다. 조금 더 추가해 설명해보자면, 리액트가 DOM 업데이트를 위해 이전 V-DOM과 현재 V-DOM에 대해 비교 연산하는 과정을 재조정이라고 한다. 이 재조정 과정에서 빛을 발하는 게 key다. 부모 요소에서 여러 자식 요소가 병렬적으로 많이 있을 때, key를 사용하면 이전 자식에 비해 현재 자식 중에 어떤 게 추가되고, 어떤 게 삭제되었는지 정확히 알 수 있다. 리액트에서는 데이터의 변화가 잦고 그에 따라서 새로운 컴포넌트를 생성할 수도, 수정할 수도, 삭제할 수도 있다. 이런 상황에서 우리는 key가 없다면 일일이 모든 컴포넌트를 순차적으로 탐색하며 변화가 있는 컴포넌..