React.js의 중요 개념

React.js는 Facebook에서 개발한 UI 라이브러리로, UI를 만드는 데 필요한 다양한 개념을 포함하고 있습니다. 이번 포스트에서는 React.js의 중요 개념을 알아보겠습니다.

컴포넌트(Component)

React.js에서 UI는 컴포넌트 단위로 구성됩니다. 컴포넌트는 UI를 구성하는 블록으로, 각각의 컴포넌트는 독립적이며, 재사용성이 높습니다. 컴포넌트는 다른 컴포넌트 안에 중첩될 수 있으며, 부모 컴포넌트는 자식 컴포넌트를 조작할 수 있습니다.

컴포넌트를 만들기 위해서는 React.Component 클래스를 상속받아야 합니다.

import React from 'react';
class MyComponent extends React.Component {  
    render() {
        return <div>Hello, World!</div>; 
    }
}

위 코드는 MyComponent라는 컴포넌트를 정의하고, render() 메서드를 통해 UI를 정의합니다.

Props

Props는 컴포넌트에서 사용되는 데이터를 전달하는 방법입니다. Props는 컴포넌트가 생성될 때 전달되며, 변경이 불가능합니다.

import React from 'react';
function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}
ReactDOM.render(<MyComponent name="Alice" />, document.getElementById('root'));

위 코드는 MyComponent 컴포넌트를 정의하고, Props로 name을 전달받아 UI에 출력합니다.

State

State는 컴포넌트의 상태를 저장하는 방법입니다. State는 컴포넌트 내부에서 변경이 가능하며, 변경이 발생하면 자동으로 UI가 업데이트됩니다.

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <div>Count: {this.state.count}</div>
        <button onClick={() => this.handleClick()}>+1</button>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

위 코드는 MyComponent라는 컴포넌트를 정의하고, State로 count를 사용합니다. handleClick() 메서드를 통해 count 값을 업데이트하며, render()

메서드에서 this.state.count 값을 출력합니다. setState() 메서드를 사용하여 State를 업데이트하면, React.js는 자동으로 UI를 업데이트합니다.

이벤트 처리

React.js에서 이벤트 처리는 DOM 요소의 이벤트 처리와 유사합니다. 이벤트 핸들러를 정의하고, 이벤트를 발생시키는 요소에 이벤트 핸들러를 등록합니다.

import React from 'react';
class MyComponent extends React.Component {
  handleClick() {
    alert('Button clicked!');
  }
  render() 
  {
    return (      <button onClick={() => this.handleClick()}>Click me!</button>    );     
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

위 코드는 MyComponent라는 컴포넌트를 정의하고, 버튼 클릭 이벤트 핸들러를 등록합니다. 버튼을 클릭하면 handleClick() 메서드가 실행되며, alert() 함수를 사용하여 알림창을 출력합니다.

조건부 렌더링

React.js에서 조건부 렌더링은 if 문 대신 삼항 연산자(?)나 논리 연산자(&&)를 사용하여 처리할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: false };
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    return (
      <div>
        {isLoggedIn ? (
          <div>Welcome, User!</div>
        ) : (
          <div>Please log in.</div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

위 코드는 MyComponent라는 컴포넌트를 정의하고, State로 isLoggedIn을 사용합니다. isLoggedIn 값에 따라 UI가 변경되며, 삼항 연산자를 사용하여 처리합니다.

마무리

위에서는 React.js의 중요 개념인 컴포넌트, Props, State, 이벤트 처리, 조건부 렌더링 등을 알아보았습니다. 이외에도 React.js는 다양한 기능과 개념을 제공하므로, 학습을 통해 보다 깊이 있는 이해를 할 수 있습니다. React.js를 사용하여 UI를 개발해 보세요!