[React] 컴포넌트

이계홍·2021년 5월 26일

React front end

리액트

목록 보기

2/4

컴포넌트 이해하기

컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다.

1. 컴포넌트 구조

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.
다음 코드는 함수형 컴포넌트이다.

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

function App() {
  const name="리액트";
  return (
    <div className="react">{name}</div>
  );
}

export default App;

다음은 클래스형 컴포넌트이다.

import React, { Component } from 'react';
import './App.css';

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

export default App;

둘이 구조는 다르지만 역할은 똑같다. 두 구조의 차이점으로는 클래스 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것이다. 또한 render함수가 꼭 있어야한다.

2. props

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

1) props 사용해보기

MyComponent.js 파일을 다음과 같이 새로 만듭니다.

import React from 'react';

const MyComponent = props=>{
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}

export default MyComponent;

App.js도 다음과 같이 수정합니다.

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component{
  render(){
    return <MyComponent name="react"></MyComponent>
  }
}

export default App;

그러면 props.name자리에 react가 들어가 "안녕하세요, 제 이름은 react입니다." 라는 것이 렌더링된 것을 확인할 수 있다.

3. state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
반면에 props는 컴포넌트가 사용 되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.
props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다.
리액트에는 두 가지 종류의 state가 존재한다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다.

1) 클래스형 컴포넌트의 state

Counter.js 파일을 src밑에 생성하여 다음과 같이 작성한다.

import React, { Component } from 'react';

class Counter extends Component {

    constructor(props){
        super(props);
        this.state={
            number:0
        };
    }
    render() {
        const {number}=this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button
                    onClick={()=>{
                        this.state({number:number+1});
                    }}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

constructor는 생성자 메소드이다. 클래스형 컴포넌트에서 생성자를 작성할 때는 반드시 super(props)를 호출해 주어야 한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.

그 다음에는 this.state 값에 초깃값을 설정해 준다.

render 함수에서 setState라는 함수를 사용했는데 이 함수가 state 값을 바꿀 수 있게 해준다.

버튼을 누르면 1씩 잘 올라간다.
또한 state 객체 안에는 여러 값이 있어도 된다.

2) 함수형 컴포넌트에서 useState

src 디렉터리에 Say.js라는 파일을 다음과 같이 작성한다.

import React, {useState} from 'react';

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

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1>{message}</h1>
        </div>
    );
};
export default Say;

useState 함수의 인자에는 상태의 초깃값을 넣어 준다.
함수를 호출하면 배열이 반환되는데, 첫 번째 원소는 현재 상태이고, 두번째 원소는 상태를 바꾸어 주는 함수이다. 세터 함수라고 부른다.
그리고 Say컴포넌트를 App에서 렌더링해 보고 입장 버튼과 퇴장 버튼을 눌러 본다.