kdh22q

React에서 useState는 함수형 컴포넌트에 상태(state)를 추가할 수 있게 해주는 Hook이다. 이는 현대 React 개발에서 중요한 구성 요소로, 사용자 입력이나 동적인 데이터 등을 렌더링 사이에 기억하도록 한다.

# React에서의 상태(state)란?

React에서 상태는 컴포넌트가 렌더링되고 동작하는 방식을 결정하는 객체이다. 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 새로운 상태를 반영한다. 상태는 사용자 입력, 서버에서 가져온 데이터, 계산 결과 등 동적인 정보를 포함할 수 있다.

전통적으로 상태 관리는 클래스 컴포넌트에서 this.state와 this.setState를 사용하여 이루어졌다. 그러나 React 16.8 버전에서 Hooks가 도입된 이후, 이제는 함수형 컴포넌트에서도 useState를 통해 상태를 관리할 수 있다.

# useState 문법

setCount(prevCount => prevCount + 1);

• state: 현재 상태 값을 나타낸다. 이 값은 React가 컴포넌트를 렌더링하는 데 사용된다.
• setState: 상태 값을 업데이트할 때 사용하는 함수이다. 이 함수를 호출하면 React가 새로운 상태로 컴포넌트를 다시 렌더링한다.
• initialState: 컴포넌트가 처음 렌더링될 때의 초기 상태 값을 나타낸다. 원시 값, 객체, 배열 또는 함수가 될 수 있다.

# useState 사용 예시

import React, { useState } from 'react';

function Counter() {
  // "count"라는 상태 변수를 선언하고 초기 값을 0으로 설정
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>당신은 {count}번 클릭했습니다</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

export default Counter;

예시 설명

• const [count, setCount] = useState(0);
• count는 상태 변수를 의미
• setCount는 count를 업데이트하는 함수
• useState(0)는 count의 초기 값을 0으로 설정

버튼을 클릭하면 setCount(count + 1)이 호출되어 count 상태가 1 증가하고, 컴포넌트가 다시 렌더링된다.

# useState에 대한 중요한 사항

1. 렌더링 간 상태 유지: 일반 변수와 달리, React는 렌더링 사이에 상태를 "기억"한다. 예를 들어 count가 업데이트되면, React는 이 값을 렌더링할 때마다 유지한다.

2. 반응성: setState 함수를 사용하여 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링한다. 이를 통해 UI가 현재 상태를 반영하게 된다.

3. 함수형 업데이트: 새로운 상태가 이전 상태에 의존하는 경우, setState에 함수를 전달하는 것이 더 안전하다. 이렇게 하면 React가 상태 업데이트를 올바르게 처리할 수 있다. prevCount는 이전 상태 값을 나타낸다.  

setCount(prevCount => prevCount + 1);

4. 지연 초기화: 초기 상태가 계산의 결과일 경우, 함수를 useState에 전달할 수 있다. 이 함수는 컴포넌트가 처음 렌더링될 때만 호출된다. 이 경우, expensiveComputation 함수는 초기 렌더링 시에만 실행된다.

const [count, setCount] = useState(() => expensiveComputation());

# 일반적인 패턴 및 모범 사례

1. 여러 개의 useState 호출: 하나의 컴포넌트에서 여러 개의 상태를 관리하기 위해 useState를 여러 번 호출할 수 있다.

const [name, setName] = useState(''); const [age, setAge] = useState(0);

const [user, setUser] = useState({ name: 'Alice', age: 25 }); // 중첩된 상태를 업데이트하는 올바른 방법 
setUser(prevUser => ({ ...prevUser, age: 26 }));

// 잘못된 방식 
user.age = 26; 
// 올바른 방식 
setUser({ ...user, age: 26 });

# useState의 사용 사례

• 폼 처리: 입력 필드의 값을 관리하는 데 사용.
• 카운터: 값의 증가나 감소를 관리 (예: 투표 시스템, 장바구니 수량 등).
• 토글 상태: true/false 값을 전환하는 데 사용 (예: 요소 표시/숨기기).
• 데이터 가져오기: API로부터 가져온 데이터를 저장.

# 요약

• useState는 함수형 컴포넌트에 상태를 추가하는 기본적인 Hook이다.
• 상태가 변경되면 React는 해당 상태에 따라 컴포넌트를 다시 렌더링한다.
• React는 렌더링 사이에 상태를 유지하며, 상태는 setState 함수를 통해 업데이트된다.

이 Hook은 React 함수형 컴포넌트에서 상호작용적이고 동적인 UI를 구축하는 기초이다.

useEffect는 React에서 사이드 이펙트를 처리하기 위한 훅이다. 사이드 이펙트란 데이터 fetching, 구독 설정, DOM 직접 조작 등 컴포넌트의 렌더링과는 직접적인 관련이 없는 작업을 의미한다. 컴포넌트가 렌더링될 때마다 특정 작업을 수행하고, 필요에 따라 정리 작업을 수행할 수 있도록 한다. useEffect 훅은 다음과 같은 방식으로 사용된다.

1. 기본 사용법: useEffect는 컴포넌트가 렌더링될 때마다 실행된다. 기본적으로 useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 실행할 함수이며, 두 번째 인자는 의존성 배열이다. 의존성 배열에 지정된 값이 변경될 때만 실행된다. 만약 두 번째 인자를 제공하지 않으면, useEffect는 매번 렌더링될 때마다 실행된다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 함수 실행
}, []);

2. 의존성 배열 사용법: 의존성 배열을 사용하면 useEffect가 언제 실행될지를 제어할 수 있다. 배열에 포함된 값이 변경될 때만 useEffect가 실행된다. 만약 배열이 빈 배열이라면, useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

useEffect(() => {
  // count가 변경될 때만 함수 실행
}, [count]);

3. 정리 함수: useEffect는 함수에서 반환된 값을 정리 함수로 사용하여 컴포넌트가 언마운트될 때나 의존성 배열의 값이 변경될 때 정리 작업을 수행할 수 있다. 이 정리 함수는 일반적으로 구독 해제나 타이머 정리와 같은 작업을 수행한다.

useEffect(() => {
  // 사이드 이펙트 작업
  return () => {
    // 컴포넌트가 언마운트될 때나 의존성 배열이 변경될 때 함수 호출
  };
}, [dependency]);

4. 의존성 배열 생략: 의존성 배열을 생략하면, useEffect는 매 렌더링마다 실행된다. 이 경우 주의가 필요하며, 불필요한 리렌더링이 발생할 수 있다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 함수 실행
});

이와 같이, useEffect를 사용하면 React 컴포넌트의 라이프사이클에 맞춰 적절히 사이드 이펙트를 관리할 수 있다.

React는 단일 페이지 애플리케이션(SPA)을 구축하는 데 사용되는 인기 있는 자바스크립트 라이브러리로, 재사용 가능한 UI 컴포넌트를 만들고 상태를 효율적으로 관리하며, 데이터 변경 시 UI가 자동으로 업데이트되도록 한다. React의 기본 개념을 다음과 같이 설명할 수 있다.

1. 컴포넌트 (Components)

• 정의: React 애플리케이션은 컴포넌트로 구성되며, 이는 UI를 정의하는 독립적이고 재사용 가능한 코드 조각이다. 컴포넌트는 클래스 기반 또는 함수 기반을 사용한다.
• 유형:
  • 함수형 컴포넌트 (Functional Components): JSX를 반환하는 자바스크립트 함수이다. 상태나 생명 주기 메서드를 관리할 필요가 없을 때 주로 사용된다.
  • 클래스 컴포넌트 (Class Components): React.Component를 확장한 ES6 클래스이다. 상태나 생명 주기 메서드를 사용해야 할 때 사용된다. 하지만 React Hooks의 도입으로 함수형 컴포넌트가 점점 더 선호되고 있다.
• 예제

function HelloWorld() { 
	return <h1>Hello, World!</h1>; 
}

2. JSX (JavaScript XML)

• 정의: JSX는 HTML과 유사한 구문 확장으로, React에서 UI를 설명하는 데 사용된다. 자바스크립트 내에서 HTML과 유사한 코드를 작성할 수 있으며, React는 이를 자바스크립트 호출(React.createElement)로 변환한다.
• 예제

const element = <h1>Hello, World!</h1>;

3. 상태 (State)

• 정의: 상태는 동적 데이터를 저장하고 컴포넌트의 동작을 결정하는 객체이다. 상태를 통해 사용자의 입력, 네트워크 응답 등 변경 사항에 따라 컴포넌트가 반응할 수 있다.
• 상태 관리:
  • 클래스 컴포넌트에서: 상태는 this.state를 사용하여 관리되며, this.setState()를 사용하여 업데이트됩니다.
  • 함수형 컴포넌트에서: React Hooks, 특히 useState를 사용하여 상태를 관리합니다.
• 예제 (useState 훅 사용)

import React, { useState } from 'react';

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

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

4. 프롭스 (Props)

• 정의: 프롭스(Props)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용된다. 프롭스는 읽기 전용이며, 전달받은 컴포넌트에서 수정할 수 없다.
• 예제

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="KDH" />;
}

5. 생명 주기 메서드 (Lifecycle Methods)

• 정의: 생명 주기 메서드는 클래스 컴포넌트에서 컴포넌트의 생명 주기(예: 마운트, 업데이트, 언마운트) 단계에 따라 특별한 작업을 수행할 수 있도록 해주는 메서드이다.
• 주요 생명 주기 메서드:
  • componentDidMount(): 컴포넌트가 DOM에 마운트된 후 호출된다.
  • componentDidUpdate(): 컴포넌트의 상태나 프롭스가 변경된 후 호출된다.
  • componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출된다.
• 참고: React Hooks가 도입되면서, 함수형 컴포넌트에서 useEffect 훅을 사용해 생명 주기 메서드와 유사한 기능을 구현할 수 있다.

6. React Hooks

• 정의: 훅(Hooks)은 함수형 컴포넌트에서 상태 및 기타 React 기능을 사용할 수 있도록 해주는 함수다.
• 주요 훅:
  • useState: 함수형 컴포넌트에 상태를 추가할 수 있다.
  • useEffect: 데이터 가져오기나 서비스 구독과 같은 부작용을 처리한다.
  • useContext: 프롭스를 수동으로 전달하지 않고도 컴포넌트 트리를 통해 데이터를 전달할 수 있는 컨텍스트(Context)를 사용할 수 있다.

7. 가상 DOM (Virtual DOM)

• 정의: 가상 DOM은 실제 DOM의 가벼운 표현이다. React는 실제 DOM의 사본을 메모리에 유지하며(가상 DOM), 상태가 변경되면 DOM의 변경된 부분만 업데이트하여 렌더링 효율을 높인다.

8. 이벤트 처리 (Handling Events)

• 정의: React는 일반 HTML에서 이벤트를 처리하는 것과 유사하게 이벤트를 처리하지만, 약간의 문법적 차이가 있다(예: 이벤트 이름은 카멜 케이스로 작성하며, 문자열 대신 함수를 전달)
• 예제

function Button() {
  function handleClick() {
    alert('Button was clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

9. 조건부 렌더링 (Conditional Rendering)

• 정의: React는 if, else 또는 삼항 연산자와 같은 표준 자바스크립트 제어 구조를 사용하여 조건에 따라 다른 출력을 렌더링할 수 있다.
• 예제

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

10. 리스트와 키 (Lists and Keys)

• 정의: React에서 .map() 메서드를 사용하여 데이터 목록을 렌더링할 수 있으며, 각 목록 항목에는 고유한 "key" 프롭을 지정하여 React가 어떤 항목이 변경되었는지, 추가되었는지, 제거되었는지를 식별할 수 있도록 한다.
• 예제

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);