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

아무래도 책이 좀 예전꺼라 그런지 코드는 변경을 해야겠다..

 

1.

파일 이름 마음대로 .js 하나 만든다.

초기 코드

import React from 'react';

function MyComponent () {
    return (
        <div>
            나의 컴포넌트
        </div>
    )
}

export default MyComponent

2. App.js에 MyComponent 사용하기

import React from 'react';
import Hello from './Hello';
import MyComponent from './MyComponent';
import Wrapper from './Wrapper';

function App() {
    return (
        <div>
            <Hello name="react" color="red"/>
            <Hello color="pink"/>
            <MyComponent />
        </div>
    );
}

export default App;

3. props도 사용해보기

//MyComponent.js
function MyComponent (props) {
    return (
        <div>
            안녕 나의 이름은 {props.name} 이야.
        </div>
    )
}


//App.js
<MyComponent name="react" />

state

props는 부모 컴포넌트가 설정하며, 컴포넌트는 해당 props를 읽기 전용으로만 사용가능.

컴포넌트 내부에서 읽고 업데이트할 수 있는 값을 사용하려면 state 사용.

기본 값을 미리 설정해야 사용할 수 있으며, this.setState() 메서드로 값을 업데이트 해야 한다.

 

컴포넌트 생성자 메서드 : constructor()

state 초깃값은 컴포넌트의 생성자 메서드인 constructor 내부에서 설정.

생성자 메서드는 컴포넌트 새로 생성 시 실행. 

이 책은 함수형 컴포넌트가 아닌 클래스형 컴포넌트를 사용한다.

근데 create로 만든 리액트 프로젝트는 함수형 컴포넌트를 사용 중이다.. 

https://devowen.com/298

[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

해당 블로그에서는 클래스형 컴포넌트가 constructor를 사용한다.

요새는 대부분 함수형 컴포넌트를 쓴다고 한다..

 

userState로 컴포넌트에서 바뀌는 값 관리하기 

모던 리액트 7번

 

리액트의 Hooks 중 하나이다.

 

버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트

import React, { useState } from 'react';

function Counter() {
    const [number, setNumber] = useState(0);

    const onIncrease = () => {
        setNumber(number + 1);
    }

    const onDecrease = () => {
        setNumber(number - 1);
    }

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter

{ useState }로 리액트 패키지에서 해당 함수를 불러온다.

배열 비구조화 할당을 통하여 각 원소를 추출해서 const [number, setNumber] = useState(0)이 된 것.

https://learnjs.vlpt.us/useful/06-destructuring.html#%EB%B0%B0%EC%97%B4-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9

 

onIncrease 는 화살표 함수이다.
()안에 매개 변수가 들어가고 중괄호에 함수의 내용이 들어간다.

 

위 방법이 아닌 함수형으로 업데이트를 할 수도 있다.

    const onIncrease = () => {
        setNumber(prevNumber => prevNumber + 1);
    }

    const onDecrease = () => {
        setNumber(prevNumber => prevNumber - 1);
    }

prevNumber는 useState를 개발한 개발자가 정한 것.

set 함수에 파라미터로 넘겨주면 이전 값을 넣어준다.