리엑트에 대해 알아보자 02

안녕하세요. 오늘은 리엑트에 대해 알아보자 01의 연장글입니다.

전 글에서 기본 개념과 장단점에 대해 간단하게 알아봤습니다.

바로 이어서 써보도록 하겠습니다.

리엑트

주요 특징

주요 특징들에 대해 자세히 알아보겠습니다. 전 글에서 주요 특징은 4가지가 있다고 말했습니다. 여기서 하나 추가할 수 있습니다. 기존의 4가지 (컴포넌트 기반 아키텍처 ,단방향 데이터 흐름 ,Virtual DOM ,JSX)에 props와 state가 있습니다.

리액트에서 props와 state는 컴포넌트의 데이터 관리를 위해 사용되는 두 가지 핵심 개념입니다. 이 둘은 유사해 보일 수 있지만, 그 역할과 사용 방법은 다릅니다.

1. Props (Properties)

props는 컴포넌트에 전달되는 데이터입니다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용됩니다. props는 읽기 전용(read-only)으로, 자식 컴포넌트에서 직접 수정할 수 없습니다.

Props의 특징:

• 읽기 전용: 컴포넌트 내에서 props를 수정할 수 없습니다.
• 데이터 전달: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.
• 컴포넌트 재사용성: props를 사용하면 컴포넌트를 더 재사용 가능하게 만들 수 있습니다.

예시:

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

위의 예시에서, Welcome 컴포넌트는 name이라는 props를 받아서 해당 값을 렌더링합니다. App 컴포넌트는 여러 Welcome 컴포넌트에 서로 다른 name 값을 전달합니다.

2. State

state는 컴포넌트 내에서 관리되는 데이터입니다. state는 컴포넌트의 상태를 나타내며, 시간이 지남에 따라 변경될 수 있습니다. 컴포넌트 내에서 state를 변경하면 리액트가 자동으로 UI를 다시 렌더링합니다.

State의 특징:

• 내부 관리: 컴포넌트 내에서 직접 관리되고 변경될 수 있습니다.
• 동적 데이터: 사용자 입력, 네트워크 요청 등의 결과로 변할 수 있는 데이터를 저장합니다.
• 재렌더링: state가 변경되면 컴포넌트가 다시 렌더링됩니다.

예시:

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>
  );
}

위의 예시에서, Counter 컴포넌트는 count라는 state를 가지고 있으며, 초기값은 0입니다. 버튼을 클릭하면 setCount 함수를 사용해 count 값을 증가시키고, 리액트는 새로운 값을 반영하기 위해 컴포넌트를 다시 렌더링합니다.

Props와 State의 차이

• props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 자식 컴포넌트에서 변경할 수 없습니다.
• state는 컴포넌트 내에서 선언되고 관리되는 데이터로, 해당 컴포넌트 내에서 변경할 수 있습니다.

사용 예시를 통한 비교

import React, { useState } from 'react';

// 자식 컴포넌트
function ChildComponent(props) {
  return <h1>{props.message}</h1>;
}

// 부모 컴포넌트
function ParentComponent() {
  const [message, setMessage] = useState('Hello, World!');

  return (
    <div>
      <ChildComponent message={message} />
      <button onClick={() => setMessage('Hello, React!')}>Change Message</button>
    </div>
  );
}

위 예시에서, ParentComponent는 message라는 state를 가지고 있습니다. 이 message state는 ChildComponent에 props로 전달됩니다. 버튼을 클릭하면 message state가 변경되고, 이에 따라 ChildComponent도 업데이트됩니다.

이처럼 props와 state는 리액트 컴포넌트의 데이터 관리를 위해 서로 다른 방식으로 사용되며, 이를 적절히 활용하면 효율적이고 유지보수하기 쉬운 UI를 만들 수 있습니다.

이렇게 리엑트의 주요 특징 5가지를 정리 할 수 있습니다.