75일차 - day02_vite & day03

1. Data 전달

1. Cat

 

2. SungJuk

 

 

 

 

 

 

 

 

2. Hooks-useRef

리액트에서 제공하는 대표적인 훅 중 하나이다.

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 선택
리액트에서는 직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능

useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능
input태그와 같이 사용자가 값을 직접 입력하는 html태그에 직접적으로 접근하여 값을 가져오는 것을 가능


리액트 컴포넌트는 State가 변할 때마다 다시 렌더링이 되면서 컴포넌트 내부 변수들이 초기화 된다.
하지만 Ref안에 있는 값은 아무리 변경해도 컴포넌트는 다시 렌더링 되지 않는다.
즉, State 대신 Ref를 사용한다면 불필요한 렌더링을 막을 수 있다.
또한 컴포넌트가 아무리 렌더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 그대로 유지 된다.
그래서 렌더링을 발생시키지 말아야 하는 값을 다룰 때 정말 편리하다.

Ref 객체를 만들어준다.
const nameRef = useRef();

선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.
<input  ref = { nameRef } />

Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.
그리고 포커싱을 해주는 DOM API focus()를 호출한다.

 

Test01 - Ref

import React, { useRef, useState } from 'react';

const Test01 = () => {
    const [id, setId] = useState('');
    const [pw, setPw] = useState('');

    const idRef = useRef();

    const onInputId = (e) => {
        console.log(e.target)
        const {value} = e.target;
        setId(value)
    }

    const onIputPw = (e) => {
        // 비구조 할당
        console.log(e.target)
        const {value} = e.target;
        setPw(value)
    }

    const onClick = () => {
        
    }

    const onReset = () => {
        setId('')
        setPw('')

        idRef.current.focus();
    }

    return (
        <div>
            아이디 <input type="text" name='id' value={id} onChange={onInputId} ref={idRef}/>
            <br /><br />
            비밀번호 <input type="password" name='pw' value={pw} onChange={onIputPw}/>
            <br /><br />
            <button onClick={onClick} disabled={id.length < 6 ? true : false}>로그인</button>
            <button onClick={onReset}>초기화</button>
        </div>
    );
};

export default Test01;

 

 

 

Test02

 

 

Test03 - 함수 전달

상태 변수와 상태변수의 값을 변경하는 함수는 같은 컴포넌트에 위치해야 한다. 

부모 컴포넌트가 상태변수와 그 값을 변경하는 함수를 가지고 있다.

자식은 상태 변수의 값을 변경하여야 한다. 

 

이때 상태 변수의 값을 바꾸는 함수를 자식에게 전달한다.

자식 컴포넌트는 부모 컴포넌트에게 받은 함수를 사용하여 상태 변수의 값을 변경할 수 있고, 이에 따라 팝업창이 활성화/비활성화로 화면이 바뀐다.

 

 

 

Test04 - 데이터 2개 전송

 

 

 

Test05

 

 

Test06 - dto

 

 

[ 변수, set변수 ] = useState() 

여기서 [ ] 은 상태변수의 형식일 뿐, 배열을 의미하는 것이 아니다. 

 

 

[ name ] : value

name을 문자열이 아닌 변수의 의미로 받아들이기 위해 [ ] 를 사용한다. 

만약 name : value로 사용하게 되면 name 부분은 키값 (문자열)를 작성하는 부분이기에 name이라는 키값이 추가된다.

따라서, [ name ] 으로 작성하여 name 변수를 사용한다고 알린다.

import React, { useRef, useState } from 'react';

const Test06 = () => {
    const nameRef = useRef();
    const [dto, setDto] = useState({
        name: '',
        id: '',
        pwd: ''
    }); 
    // 객체 >> ({})
    // 배열 >> ([])
    // 변수 >> ()

    const {name, id, pwd} = dto;

    const onInput = (e) => {
        const {value, name} = e.target 
        
        setDto({
            ...dto,
            [name] : value // 수정
        });
    }
    const onRest = () => {
        setDto({
            name: '',
            id: '',
            pwd: ''
        })

        nameRef.current.focus();
    }

    return (
        <div>
            <table border={1} cellPadding={5} cellSpacing={0}>
                <tr>
                    <th width='100'>이름</th>
                    <td><input type="text" name='name' value={name} onChange={onInput} ref={nameRef}/></td>
                </tr>
                <tr>
                    <th width='100'>아이디</th>
                    <td><input type="text" name='id' value={id} onChange={onInput}/></td>
                </tr>
                <tr>
                    <th width='100'>비밀번호</th>
                    <td><input type="password" name='pwd' value={pwd} onChange={onInput}/></td>
                </tr>
                <tr>
                    <td colSpan={2} align='center'>
                        <button onClick={onRest}>초기화</button>
                    </td>
                </tr>
            </table>
        </div>
    );
};

export default Test06;