목적

리액트 기본 컴포넌트 생성 방법, props, state 익히기

React.js, often just called React, is a popular JavaScript library developed by Facebook for building user interfaces (UI) for web applications. Its main focus is on creating reusable components, making UI development more modular and efficient.

Here are the basic concepts of React.js in the simplest way possible:

Components: In React, a component is a reusable piece of code that represents a part of the UI. Think of them as building blocks that you can assemble to create an entire web page.

JSX: `JSX (JavaScript XML) is a syntax extension for JavaScript that looks like HTML. It's used to describe the UI structure within React components. React converts JSX into JavaScript objects behind the scenes.

State: State represents the data that is specific to a component and can change over time. It's used to keep track of user interactions and render UI updates based on changes in the data.

Props: Props (short for "properties") are used to pass data from one component to another. They're like function arguments, allowing you to customize components and make them more reusable.

Lifecycle Methods: Lifecycle methods are special functions that React calls at different stages of a component's life, such as when it's created, updated, or removed from the page. You can use these methods to add custom logic during specific phases of the component's life.

Virtual DOM: The Virtual DOM is an in-memory representation of the actual DOM (Document Object Model). React uses the Virtual DOM to efficiently update the UI, making changes only when necessary, which results in better performance.

To sum up, React.js helps you create fast, efficient, and modular web applications by allowing you to build reusable components that can manage their own state and interact with other components using props. It uses JSX syntax for a familiar look and feel, and leverages the Virtual DOM for efficient UI updates.

쿽

1 클래스형 컴포넌트 생성

# MyName.js
import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

export default MyName;

2 컴포넌트 랜더링

# App.js
import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

3 STATE 랜더링

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }

  handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

이론

• component : 재사용 가능한 UI 조각. 함수형 및 클래스형 컴포넌트가 있음.
• 함수형 컴포넌트 예)

import React from 'react';

const MyName = ({ name }) => {
  return (
    <div>
      안녕하세요! 제 이름은 {name} 입니다.
    </div>
  );
};

export default MyName;

• props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 받아온 props 를 직접 수정 할 수 는 없다.

• state : 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있음

• setState : 해당 함수가 호출되면 컴포넌트가 리랜더링되어 state 값이 변경됨.

참고

누구든지 하는 리액트 4편: props 와 state