컴포넌트

컴포넌트

리액트는 여러 컴포넌트로 구성하여 사용한다. 컴포넌트는 속성값 props와 상태 값 state를 사용한다. 원래는 클래스형 컴포넌트와 함수형 컴포넌트가 존재해서 사용되어 왔는데 요새는 함수형 컴포넌트가 주로 사용된다. 클래스 형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용하고, 임의 메소드를 정의할 수 있다. 함수형 컴포넌트는 선언하기 편하고, 메모리 측면에서 유리하다. 또한 클래스 형 컴포넌트가 가진 장점들을 훅을 사용해서 구현이 가능하기 때문에 요즘 대부분의 애플리케이션에서는 함수형 컴포넌트를 사용하여 많이 작업한다.

 

사용하기

src/components/MyConponent.js 생성

const MyComponent = () => {
    return <>컴포넌트 테스트</>
}

export default MyComponent

App.js에 아래 코드를 추가한다.

import './App.css';
import Mycomponent from "./components/Mycomponent";

function App() {
  return (
    <>
      <Mycomponent/>
    </>
  );
}

export default App;

 

Prorps

properties의 줄임 말로 컴포넌트의 속성을 설정할 때 사용하는 요소이다. Props 값은 해당 컴포넌트를 불러와서 사용하는 부모 컴포넌트에서 설정한다. 아까 작성한 코드를 변경한다.

const MyComponent = (props) => {
    return <>{props.name}</>
}

export default MyComponent

import './App.css';
import Mycomponent from "./components/Mycomponent";

function App() {
  return (
    <>
      <Mycomponent name={"하하하하"}/>
    </>
  );
}

export default App;

children은 컴포넌트 태그 사이의 내용을 보여주는 속성 값이다. App.js에서 입력한 컴포넌트 사이의 값은 생략되고, 실제 사용한 컴포넌트 내용이 화면에 출력된다.

const MyComponent = (props) => {
    return <>이 글씨가 보이나요?</>
}
export default MyComponent

import './App.css';
import Mycomponent from "./components/Mycomponent";

function App() {
  return (
    <>
        <Mycomponent>컴포넌트</Mycomponent>
    </>
  );
}

export default App;

속성의 비 구조화 할당을 사용하면 좀 더 쉽게 값을 가져올 수 있다.

const MyComponent = (props) => {
    const { name, children } = props;
    return <>
        <h1>{name}</h1>
        <h1>{children}</h1>
    </>
}
export default MyComponent

import './App.css';
import Mycomponent from "./components/Mycomponent";

function App() {
  return (
    <>
        <Mycomponent name={"name"}>컴포넌트</Mycomponent>
    </>
  );
}

export default App;

 

 

State

state는 컴포넌트 내부에서 바뀌는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이기 때문에 props는 읽기 전용으로만 사용된다. 그러면 자식 컴포넌트는 props를 변경하기 위해 부모 컴포넌트에서 바꿔서 자신의 값을 변경해야 한다. 그렇기 때문에 자신의 상태를 변경하는 값으로 state를 사용한다. 여기서 드디어 함수형 컴포넌트 훅인 useState를 사용해서 작업한다.

위에서 언급한 비 구조화 할당을 통해 useState를 사용한다. 첫번째 message 는 상태 변수이고, setMessage는 해당 변수 값을 변경하는 함수이다. 

import {useState} from "react";

const Hello = () => {
    const [message, setMessage] = useState('');
    const onClickHello = () => setMessage("Hello");
    const onClickBye = () => setMessage("Bye");
    return (
        <>
            <button onClick={onClickHello}>Hello</button>
            <button onClick={onClickBye}>Bye</button>
            <h1>msg: {message}</h1>
        </>
    );
}

export default Hello;

import './App.css';
import Hello from "./components/Hello";

function App() {
  return (
    <>
        <Hello/>
    </>
  );
}

export default App;