State

React에서의 state, 즉 상태는 컴포넌트 내에서 변경될 수 있는 데이터를 의미합니다. 상태는 일반적으로 컴포넌트가 사용자와 상호작용하면서 변경되는 값을 담고 있으며, 상태가 변경될 때마다 컴포넌트의 UI가 자동으로 업데이트됩니다.

React 컴포넌트는 다양한 상태를 가질 수 있으며, 상태는 컴포넌트의 생성자(constructor)에서 초기화됩니다. 상태는 컴포넌트의 생명주기(lifecycle) 동안 변경될 수 있으며, 변경된 상태에 따라 UI가 업데이트됩니다.

React에서 상태는 불변성(Immutability)을 유지해야 합니다. 이는 상태가 변경될 때마다 새로운 객체를 생성하여 기존 상태를 변경하는 것이 아니라, 새로운 상태를 생성하여 기존 상태를 대체하는 방식으로 변경되어야 함을 의미합니다. 이를 통해 React는 성능 향상을 도모하며, 상태 변경으로 인한 예기치 않은 버그를 방지할 수 있습니다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Props

리액트 코드 짜는 법 (new)

Props는 리액트에서 컴포넌트 간 데이터를 전달하는 방법 중 하나입니다. props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

props는 객체 형태로 자식 컴포넌트에 전달됩니다. 이 객체는 자식 컴포넌트에서는 읽기 전용으로 사용되며, 부모 컴포넌트에서 변경할 수 없습니다. props를 이용하면 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 데이터를 사용하여 렌더링을 할 수 있습니다.

• 읽기 전용인 이유는?

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const name = 'John Doe';
  return (
    <div>
      <ChildComponent name={name} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  return <div>{props.name}</div>;
}

export default ChildComponent;

React hook

리액트 Hooks는 함수형 컴포넌트에서 상태(state)를 관리하거나, 라이프사이클 메서드를 사용할 수 있게 해주는 기능입니다. 이전에는 클래스형 컴포넌트에서만 상태(state)를 관리할 수 있었지만, Hooks를 이용하면 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. Hooks를 사용하면 코드를 간결하게 유지할 수 있고, 재사용성이 높아집니다.