React 컴포넌트

https://ko.wikipedia.org

<"리액트를 다루는 기술" 책 참조>

---

안녕하세요 컴포넌트에 대해서 포스팅 해보려고 합니다.

 

모듈 내보내기 및 불러오기

//MyCompenet.js 파일 불러오기

import MyComponent from './MyComponent';

props

properties를 줄인 표현으로 컴포넌트 속성을 설정할 대 사용하는 요소.

children : 태그 사이에 내용을 보요줌.

defaultProps : default 값 설정

비구조 할당 : 객체에서 값을 추출하는 문법

propTypes를 통한 props 검증 (string에 숫자를 넣었을 경우)

isRequired : 필수 propTypes 설정

//App.js

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

const App = () => {
  return <MyComponent>리액트</MyComponent>
};

export default App;

 

//MyComponent.js

import React from 'react';

const MyComponent = props => {
    return (
      <div>
        안녕 {props.name} <br />
        children {props.children}
      </div>
    );
}

MyComponent.defaultProps = {
  name : 'default name'
}

export default MyComponent;

() 콜백 함수를 등록하여 작업 처리

//App.js

import React from 'react';
import './App.css';
import MyComponent from './MyComponent';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;

//Counter.js

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    //state의 초깃값 설정하기
    this.state = {
      number : 0
    };
  }

  render() {
    const { number } = this.state; //state를 조회할 때는 thils.state로 조회함
    return (
      <div>
        <h1>{number}</h1>
        <button onClick={() => {
            this.setState(
              { number : number + 1 },
              () => { console.log('더하기'); }
            );
          }}> +1 </button>
          <button onClick={() => {
              this.setState(
                { number : number - 1 },
                () => { console.log('빼기'); }
              );
            }}> -1 </button>
      </div>
    );
  }
}

export default Counter;

배열 비구조화 할당

//App.js

import React from 'react';
import './App.css';
import MyComponent from './MyComponent';
import Counter from './Counter';
import Say from './Say';

const App = () => {
  return <Say />;
};

export default App;

//Say.js

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요');
  const onClickLeave = () => setMessage('안녕히가세요');

  const [color, setColor] = useState('black');
  
  return (
    <div>
      <button onClick={onClickEnter}> 입장 </button>
      <button onClick={onClickLeave}> 퇴장 </button>
      <h1 style={{ color }}> {message} </h1>
      <button style={{ color : 'red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color : 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
      <button style={{ color : 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
    </div>
  )
}

export default Say;