React의 기초개념 5가지

React의 기초개념 5가지

Component

React에서 UI를 구성하는 독립적인 단위이다.

컴포넌트는 재사용이 가능하며, 각각의 컴포넌트는 특정한 기능을 담담한다.

예를 들어 버튼, 입력 필드, 헤더, 페이지 등이 모두 컴포넌트가 될 수 있다.

 

예시.

정의

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

 

랜더링

const element = <Welcome name="Jason" />;
ReactDOM.render(
  element, 
  document.getElementById('root')
);

 

 

Props

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는데 사용된다.

Props는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없다.

컴포넌트의 속성을 설정하여 해당 컴포넌트에 데이터를 전달할 수 있다.

 

파라미터라고 이해하니 이해하는데 도움이 되었던것 같다.

 

State

State는 컴포넌트 내부에서 관리되는 데이터이다.

상태가 변경되면, React는 자동으로 해당 컴포넌트를 다시 렌더링한다.

주로 사용자 입력, API 호출 결과, 컴포넌트 내부에서 발생하는 변경사항을 다룰때 상태를 사용한다.

 

예시.

간단한 버튼을 클릭할때마다 상태가 변경되는 카운터 (count값이 1씩 증가)

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 count 상태와 그 상태를 변경하는 setCount 함수를 정의합니다.
  const [count, setCount] = useState(0);

  // 버튼 클릭 시 호출되는 함수
  const increment = () => {
    // setCount 함수를 사용하여 count 상태를 변경합니다.
    // 이 함수를 호출할 때마다 React는 컴포넌트를 다시 렌더링하고 변경된 상태를 반영합니다.
    setCount(count + 1);
  };

  return (
    <div>
      <h2>카운터</h2>
      <p>{count}</p>
      {/* 버튼을 클릭할 때마다 increment 함수가 호출됩니다. */}
      <button onClick={increment}>증가</button>
    </div>
  );
}

export default Counter;

 

Life Cycle

React 컴포넌트는 생성, 업데이터, 소멸과 같은 생명주기를 가진다.

생명주기 메서드로는 'componentDidMount', 'componentDidUpdate', 'componentWillUnmount' 등이 있다.

 

예시.

클래스형 컴포넌트를 사용하여 생명주기 메서드의 호출 단계를 콘솔에 찍어주는 코드이다.

import React, { Component } from 'react';

class MyComponent extends Component {
  // 컴포넌트가 생성될 때 호출됨
  constructor(props) {
    super(props);
    console.log('Constructor 호출');
  }

  // 컴포넌트가 화면에 나타나기 전에 호출됨
  componentDidMount() {
    console.log('ComponentDidMount 호출');
  }

  // 컴포넌트가 업데이트될 때 호출됨
  componentDidUpdate(prevProps, prevState) {
    console.log('ComponentDidUpdate 호출');
  }

  // 컴포넌트가 소멸될 때 호출됨
  componentWillUnmount() {
    console.log('ComponentWillUnmount 호출');
  }

  render() {
    console.log('Render 호출');
    return <div>React 생명주기 예시</div>;
  }
}

export default MyComponent;

 

Lifting State Up

여러 컴포넌트 간에 상태를 공유하거나 동기화하기 위해 사용된다.

일반적으로 하위 컴포넌트의 상태를 상위 컴포넌트로 올려서 상위 컴포넌트에서 상태를 관리한다.

다양한 컴포넌트 간에 상태를 공유하고 데이터를 관리할 수 있다.

 

예시.

부모 컴포넌트에서 상태를 정의하고, 이 상태를 하위 컴포넌트의 props 전달하고 전달받은 상태를 화면에 표시, 버튼 클릭시 상태를 변경할 수 있는 함수를 호출하는 예시이다.

import React, { useState } from 'react';

// 부모 컴포넌트
function ParentComponent() {
  // 부모 컴포넌트에서 상태를 정의합니다.
  const [count, setCount] = useState(0);

  // 하위 컴포넌트에 전달할 증가 함수
  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>부모 컴포넌트</h2>
      <p>부모 컴포넌트에서의 상태: {count}</p>
      {/* 하위 컴포넌트에 상태와 상태를 변경하는 함수를 props로 전달합니다. */}
      <ChildComponent count={count} increment={incrementCount} />
      <AnotherChildComponent count={count} />
    </div>
  );
}

// 하위 컴포넌트
function ChildComponent({ count, increment }) {
  return (
    <div>
      <h3>첫 번째 하위 컴포넌트</h3>
      <p>부모로부터 받은 상태: {count}</p>
      {/* 상태 변경 함수를 호출하여 상태를 변경합니다. */}
      <button onClick={increment}>증가</button>
    </div>
  );
}

// 또 다른 하위 컴포넌트
function AnotherChildComponent({ count }) {
  return (
    <div>
      <h3>두 번째 하위 컴포넌트</h3>
      <p>부모로부터 받은 상태: {count}</p>
    </div>
  );
}

export default ParentComponent;