[포스코 x 코딩온] 웹개발 과정 8주차 - 2 | State

두번째는 react의 State에 대해서 알아보았습니다.
Class형 컴포넌트는 따로 다루지 않았습니다.

React Hooks

React Hooks는 React v16.8에서 새롭게 도입된 기능으로, 함수형 컴포넌트에서도 상태(state) 관리, 생명주기(lifecycle) 메소드, 그리고 기타 기능들을 사용할 수 있도록 해줍니다. 이전에는 이러한 기능들을 사용하기 위해서는 클래스형 컴포넌트를 사용해야 했지만, React Hooks를 사용하면 함수형 컴포넌트에서도 간단하게 이러한 기능들을 사용할 수 있습니다.

React Hooks는 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue 등의 Hook 함수들이 있습니다. 각 Hook 함수들은 특정한 기능을 수행하며, 이를 조합하여 복잡한 로직을 작성할 수 있습니다.

React Hooks를 사용하면, 클래스형 컴포넌트에서 발생할 수 있는 몇 가지 문제점을 회피할 수 있습니다. 예를 들어, 클래스형 컴포넌트에서는 this가 가리키는 객체에 대한 오해와 실수가 발생하기도 하며, 코드가 복잡해지고 가독성이 떨어질 수 있습니다. 함수형 컴포넌트와 React Hooks를 사용하면, 이러한 문제점을 회피하고 코드의 간결성과 가독성을 높일 수 있습니다.

React Hooks는 React 개발자들에게 더욱 효율적이고 간편한 개발을 가능케 하여 React 생태계를 발전시키는데 큰 역할을 하고 있습니다.

useState()

useState는 React Hooks 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리하는 데 사용됩니다. 이전에는 상태를 관리하기 위해 클래스형 컴포넌트에서 state를 사용했지만, useState를 사용하면 함수형 컴포넌트에서도 상태를 쉽게 관리할 수 있습니다.

useState는 배열을 반환하며, 첫 번째 요소는 상태 값(state)이고, 두 번째 요소는 상태 값을 변경하는 함수(setState)입니다. 상태 값은 컴포넌트가 렌더링될 때마다 업데이트됩니다.

setState 함수는 이전 상태 값을 받아서 새로운 상태 값을 반환하는 함수를 인수로 받습니다. 이전 상태 값을 직접 수정하면 안 되고, 항상 새로운 상태 값을 반환해야 합니다. setState 함수를 사용하여 상태 값을 업데이트할 때, 이전 상태 값에 의존하는 경우 함수를 인수로 전달할 수도 있습니다.

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위 예시에서 count는 상태 값이고, setCount는 상태 값을 업데이트하는 함수입니다. 초기 값으로 0을 전달하여 상태 값을 초기화하고, handleClick 함수에서 setCount 함수를 호출하여 count 값을 증가시킵니다. count 값이 변경되면, 컴포넌트가 다시 렌더링되어 새로운 값이 화면에 표시됩니다.

props

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. props는 읽기 전용(immutable)이며, 컴포넌트 내부에서 변경할 수 없습니다.

부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하기 위해서는 해당 데이터를 props로 전달해야 합니다. props는 HTML 태그의 속성(attribute)과 같은 형태로 전달됩니다. 예를 들어, 다음과 같이 자식 컴포넌트에 name이라는 props를 전달할 수 있습니다.

<MyComponent name="kang"/>

자식 컴포넌트에서 props를 사용하기 위해서는 props 객체를 통해 해당 데이터에 접근합니다. 예를 들어, 위의 예제에서 MyComponent에서 name props를 사용하려면 다음과 같이 코드를 작성할 수 있습니다.

function MyComponent(props) {
  return <div>Hello my name is {props.name}!</div>;
}

defaultProps를 사용하여 props의 기본값을 설정할 수 있습니다. defaultProps를 정의하면, 해당 props가 부모 컴포넌트에서 전달되지 않았을 때 기본값이 사용됩니다.

function MyComponent(props) {
  return <div>Hello my name is {props.name}!</div>;
}

MyComponent.defaultProps = {
  name: "default"
};

이렇게 React에서의 가장 많이사용하고 가장 중요한 state의 기본에 대해서 배웠습니다 다음시간에는 다른 hooks들에 대해서 가지고 오겠습니다.