나의 첫 리액트 컴포넌트

진짜 별거 아닌데 혼자 감격해서 글 올림 주의.

버튼을 클릭하면 1씩 올라가는 컴포넌트를 만들었다.

import React from 'react';
import 'App.css';

// 리액트 컴포넌트를 상속받아서 컴포넌트 생성
class Counter1 extends React.Component {
  state = {
    value: this.props.initialValue,
  };  // 상태값 초기화

  onClick = () => {
    const { value } = this.state;
    this.setState({ value: value + 1 });
  };  // 버튼을 클릭할 때마다 value 1씩 증가시켜서 다시 value에 저장

  render() {
    const { value } = this.state;
    return (
      <div>
        Counter1: { value }
        <button onClick={this.onClick}>+1</button>
      </div>
    );  // +1 이라고 써있는 버튼 생성
  }
}

function App() {
  return (
    <div>
      <Counter1 initialValue={10} />
      <Counter1 initialValue={10} />
      <Counter1 initialValue={10} />
    </div>
  );  // 컴포넌트 재사용
}

export default App;

첫 컴포넌트 동작 캡쳐

하드코딩하지 않고 배열 안 값 리턴하기

props 없는 버전

import React from 'react';
import 'App.css';

class FruitComponent extends React.Component {
  render () {
    const fruits = ["수박", "딸기", "귤"]
    return (
      <div>
        <h1>좋아하는 과일</h1>
        <ul>
          {
            fruits.map((name, index) => {
              return <li key={ index }>{ name }</li>
            })
          }
        </ul>
      </div>
    )
  }
}

function App() {
  return (
    <div>
      <FruitComponent />
    </div>
  );
}

export default App;

props 있는 버전

import React from 'react';
import 'App.css';

class FruitComponent extends React.Component {
  render () {
    return (
      <div>
        <h1>좋아하는 과일</h1>
        <ul>
          {
            this.props.fruits.map((name, index) => {
              return <li key={ index }>{ name }</li>
            })
          }
        </ul>
      </div>
    )
  }
}

function App() {
  const fruits = ["수박", "딸기", "귤"]
  return (
    <div>
      <FruitComponent fruits = { fruits } />
    </div>
  );
}

export default App;

Published 11 Mar 2021