Study Web Development

4월 6일

이전으로

React

컴포넌트

클래스형 컴포넌트

1. 새 리액트 앱 ch07-component 생성하고 구동
2. VSC에서 폴더 열기-ch07-component 선택하고 src 폴더에 새 파일 MyComponent.js 생성

import React, {Component} from "react";
import PropTypes from 'prop-types';

// 클래스형 컴포넌트
class MyComponent extends Component {
    // 객체를 여러 번 생성해도 공유하기 위해 static으로 선언
    static defaultProps = {
        name:'기본 이름'
    };
    static propTypes = {
        name:PropTypes.string
    };

    render() {
        // 구조 분해 할당
        const {name, children} = this.props;

        return (
            <div>
                안녕하세요, 제 이름은 {name}입니다.<br/>
                children 값은 {children}입니다.
            </div>
        );
    }
}

export default MyComponent;

3. App.js를 다음처럼 수정

import React from "react";
import MyComponent from "./MyComponent";

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

export default App;

상태

• UI와 데이터를 모두 포함하는 컴포넌트와 달리, 데이터만 관리하기 위한 개념

클래스형 컴포넌트의 상태

1. 새 리액트 앱 ch08-state 생성하고 구동
2. VSC에서 폴더 열기-ch08-state 선택하고 src 폴더에 새 파일 Counter.js 생성

import React, {Component} from "react";

// 클래스형 컴포넌트
class Counter extends Component {
    // 컴포넌트 내부에서 읽고 또 업데이트할 수 있는 값을 사용하려면 state를 사용
    // 기본값을 미리 설정해야 사용 가능하며, this.setState() 메서드로만 업데이트 수행
    state = {
        number:0,
        countNumber:0,
        fixedNumber:10
    };

    render() {
        // state를 조회할 때는 this.state로 조회
        const {number, countNumber, fixedNumber} = this.state;
        
        // 이벤트 연결시 태그의 이벤트 속성을 이용하며, 중괄호 안에서 함수 형태(=이벤트 핸들러)로 이벤트를 명시
        return (
            <div>
                <h1>{number}, {countNumber}</h1>
                <h4>바뀌지 않는 값: {fixedNumber}</h4>
                <button
                    onClick={() => {
                        this.setState({number:number+1,countNumber:countNumber+2});
                    }}
                >숫자 증가시키기</button>
            </div>
        );
    }
}

export default Counter;

3. App.js를 다음처럼 수정

import React from "react";
import Counter from "./Counter";

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

export default App;

함수형 컴포넌트의 상태

1. 새 리액트 앱 ch09-state 생성하고 구동
2. VSC에서 폴더 열기-ch09-state 선택하고 src 폴더에 새 파일 Say.js 생성

import React, { useState } from "react";

const Say = () => {
    // 배열 구조 분해 할당
    // 예) const array = [1,2];
    // const [one, two] = array;

    // useState 함수 인자에는 상태의 초기 값을 전달
    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>
            {/* JSX 주석은 중괄호로 감싸야 주석으로 인식됨 */}
            {/* color:color와 동일; 변수명 color가 속성명으로, 변수값이 속성값으로 인식됨 */}
            <h1 style=>{message}</h1>
            <button style= onClick={() => setColor('pink')}>
                분홍색
            </button>
            <button style= onClick={() => setColor('aqua')}>
                하늘색
            </button>
            <button style= onClick={() => setColor('gold')}>
                금색
            </button>
        </div>
    );
}

export default Say;

3. App.js를 다음처럼 수정

import Say from "./Say";
function App() {
  return (
    <Say />
  );
}

export default App;

다음으로