Study Web Development

4월 8일

이전으로

React

Ref

• React에서는 태그를 식별할 때 id가 아니라 ref를 사용

1. 새 리액트 앱 ch13-ref 생성하고 구동
2. src 폴더에 ValidationSample.js 생성

import React, {Component} from "react";

// 클래스형 컴포넌트
class ValidationSample extends Component {
    state = {
        username:'',
        password:'',
        clicked:false
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        });
    };

    handleClick = () => {
        this.setState({
            clicked:true
        });
        if(this.state.username === '') {
            this.username.focus();
            return;
        }
        if(this.state.password === '') {
            this.password.focus();
            return;
        }
    };

    render() {
        return (
            <div>
                <h1>ref 연습</h1>
                <div>
                    <input
                        ref={(ref) => {
                            this.username = ref;
                        }}
                        type="text"
                        name="username"
                        placeholder="사용자명"
                        value={this.state.username}
                        onChange={this.handleChange}
                    />
                    <span>
                        {this.state.clicked && this.state.username === '' ? '이름은 필수' : ''}
                    </span>
                </div>
                <div>
                    <input
                        ref={(ref) => {
                            this.password = ref;
                        }}
                        type="password"
                        name="password"
                        placeholder="비밀번호"
                        value={this.state.password}
                        onChange={this.handleChange}
                    />
                    <span>
                        {this.state.clicked && this.state.password === '' ? '비밀번호는 필수' : ''}
                    </span>
                </div>
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default ValidationSample;

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

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

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

export default App;

Map

1. 새 리액트 앱 ch14-map 생성하고 구동
2. src 폴더에 IterationSample.js 생성

import React, { useState } from "react";

// 함수형 컴포넌트
const IterationSample = () => {
    // 기본 데이터 사용
    const [names, setNames] = useState([
        {id:1, text:'눈사람'},
        {id:2, text:'얼음'},
        {id:3, text:'눈'},
        {id:4, text:'바람'}
    ]);
    const [inputText, setInputText] = useState('');
    // 새로운 항목을 추가할 때 사용할 id
    const [nextId, setNextId] = useState(5);

    // 이벤트 핸들러
    const onChange = (e) => setInputText(e.target.value);
    // 데이터 저장
    const onClick = () => {
        // concat(): 기존 배열(array)과 파라미터로 받은 값을 합쳐 새로운 배열을 생성
        const nextNames = names.concat({
            id:nextId,
            text:inputText
        });
        setNextId(nextId + 1);
        // names 값을 업데이트
        setNames(nextNames);
        setInputText('');
    };
    // 데이터 삭제
    const onRemove = (id) => {
        // filter(): 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
        const nextNames = names.filter((name) => (name.id!==id));
        setNames(nextNames);
    };

    // 목록 만들기
    // map(): 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
    const namesList = names.map((name) => (
        <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
            {name.text}
        </li>
    ));

    return (
        <>
            <input value={inputText} onChange={onChange} />
            <button onClick={onClick}>추가</button>
            <ul>{namesList}</ul>
        </>
    );
}

export default IterationSample;

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

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

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

export default App;