[리액트를 다루는 기술] 3장 컴포넌트

fzerome·2022년 11월 1일

리액트를 다루는 기술

목록 보기

2/9

컴포넌트 선언 방식

함수 컴포넌트
클래스형 컴포넌트

2장에서의 문법들은 함수 컴포넌트이다.

클래스형 컴포넌트

클래스형 컴포넌트 예시

render 함수가 꼭 있어야하고, 그 안에서 보여줄 JSX를 반환해야한다.

import React, {Component} from 'react;

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

export default App;

차이점은?

함수 컴포넌트는 상대적으로 선언하기가 편하며 메모리 자원도 덜 사용한다.
클래스형 컴포넌트는 state기능 및 라이프사이클 기능 사용이 가능하며 메서드 정의가 가능하다.

📢 추가로,,

함수 컴포넌트의 단점은 state와 라이프사이클 API 사용이 불가능한점 이었지만 리액트 v16.8 이후 Hooks가 도입되면서 해결되었다고 한다.
리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다.
하지만, 클래스형 컴포넌트도 꼭 알아야한다.

🎁 ES6 화살표 함수

함수를 파라미터로 전달할 때 유용하다.
{}를 열어주지 않으면 연산한 값을 그대로 return 한다는 의미이다.

const triple = (value) => value * 3;

🎁 vscode > reactjs code snippet 확장 프로그램 Tip

rsc => 엔터 : 함수 컴포넌트 생성
rcc => 엔터 : 클래스형 컴포넌트 생성

props

: 컴포넌트 속성을 설정할때 사용하는 요소

값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
propTyps: props의 타입을 지정
defaultprops와 propTypes는 필수는 아니지만 협업 시 좋다
비구조화 할당 문법 ES6

App.js

function App() {
  return <MyComponent name="React"/>;
}

MyComponent.js

const MyComponent = ({name, children}) => {
    return (
        <div>
            나의 컴포넌트는 {name} 입니다.<br/>
            children은 {children} 입니다.
        </div>
    );
};

// 기본값 설정
MyComponent.defaultProps = {
    name: '기본이름'
};

// 타입 설정, 필수값 설정
MyComponent.propTypes = {
    name: PropTypes.string
    favoriteNumber: PropTypes.number.isRequired
};

state

: 컴포넌트 내부에서 바뀔 수 있는 값

클래스형 컴포넌트 state

prevState

함수형 컴포넌트 useState [권장]

비구조화 할당
[현재상태, setter 함수] = useState(초깃값)
한 컴포넌트에서 여러번 사용 가능하다 (상태관리)

App.js

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

Say.js

import React, {useState} from 'react';

const Say = () => {
    const [msg, setMsg] = useState('');
    const [color, setColor] = useState('black');
    const onClickEnter = () => setMsg('안녕하세요');

    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <h1 style={color}>{msg}</h1>

            <button style={{color:'red'}} onClick={() => setColor('red')}>빨강</button>
        </div>
    )
}

export default Say;