[한입 크기로 잘라 먹는 리액트] - React.js 입문 3

 

---

강의 - Section 5 : React.js 입문

유데미 : https://www.udemy.com/course/winterlood-react-basic/

인프런 : 

 

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런

---

 

 

 

React.js 입문

State로 사용자 입력 관리하기

 

* 간단한 회원가입 폼을 만들어 보자. 

/*
  간단한 회원 가입 폼
  1. 이름
  2. 생년월일
  3. 국적
  4. 자기소개
*/

 

import { useState } from "react";

const Register = () => {

    const [name, setName] = useState("이름");
    const [birth, setBirth] = useState("");
    const [country, setCountry] = useState("");
    const [bio, setBio] = useState("");

    const onChangeName = (e) => {
        setName(e.target.value);
    }

    const onChangeBirth = (e) => {
        setBirth(e.target.vlaue);
    }

    const onChangeCountry = (e) => {
        setCountry(e.target.value);
    }

    const onChangeBio = (e) => {
        setBio(e.target.value);
    }


    return (
        <div>
            <div>
                <input value={name} onChange={onChangeName} placeholder="이름" />
            </div>
            <div>
                <input value={birth} onChange={onChangeBirth} type="date" />
            </div>
            <div>
                <select value={country} onChange={onChangeCountry}>
                    <option value={""}></option>
                    <option value={"kr"}>한국</option>
                    <option value={"us"}>미국</option>
                    <option value={"uk"}>영국</option>
                </select>
            </div>
            <div>
                <textarea value={bio} onChange={onChangeBio} />
            </div>
        </div>
    )
}

export default Register;

 

 

 

* 위 코드를 살펴보면 중복된 코드가 다수 발견된다. 깔끔하게 고쳐보자.

 

import { useState } from "react";

const Register = () => {

    const [input, setInput] = useState({
        name : "", 
        birth : "",
        country : "",
        bio : ""
    });

    const onChange = (e) => {
        setInput({
            ...input,
            [e.target.name] : e.target.value
        })
    }

    return (
        <div>
            <div>
                <input name="name" value={input.name} onChange={onChange} placeholder="이름" />
            </div>
            <div>
                <input name="birth" value={input.birth} onChange={onChange} type="date" />
            </div>
            <div>
                <select name="country" value={input.country} onChange={onChange}>
                    <option value={""}></option>
                    <option value={"kr"}>한국</option>
                    <option value={"us"}>미국</option>
                    <option value={"uk"}>영국</option>
                </select>
            </div>
            <div>
                <textarea name="bio" value={input.bio} onChange={onChange} />
            </div>
        </div>
    )
}

export default Register;

 

* 바뀐 점

- 상태 관리 방식 통합 : 입력 필드별로 각각 useState를 사용하여 개별 관리 하던 상태들을 단일 객체(input)를 사용하여 모든 입력상태를 통합 관리하도록 수정함

 - onChange 함수 통합 : 필드마다 별도로 정의했던 onChange 함수를 하나로 통합하여, name 속성을 통해 동적으로 상태를 업데이트 하도록 개선

 - 상태 업데이트 방식 : 전개 연산자(...)로 기존 상태 복사후 [e.target.name]의 값에 따라 해당 키의 값을 변경

 

 

 

React.js 입문

useRef - 컴포넌트 변수 생성하기

 

 

* useRef 란? 함수형 컴포넌트에서 DOM 요소를 직접 참조하거나 컴포넌트의 상태 변화 없이 값을 저장하는데 사용. 

 

* useRef의 특징 

 - DOM 요소 접근 : 특정 DOM 요소에 접근하여 직접 조작(포커스 이동, 스크롤 조작, HTML 요소 크기 계산 등)

 - 값 저장 : 컴포넌트가 다시 렌더링되더라도 useRef에 저장된 값은 변하지 않는다.

 

*useRef와 useState의 차이점

특징	useState	useRef
리렌더링	상태값 변경 시 컴포넌트를 리렌더링 함	값이 변경되어도 리렌더링하지 않음
주요 목적	컴포넌트의 상태 관리 및 UI 업데이트	DOM 요소 접근 또는 리렌더링 없이 값 저장
값 초기화 시점	컴포넌트가 리렌더링 될 때 초기화 됨	컴포넌트가 마운트 될 때 한 번 초기화 됨
저장 공간	리렌더링 시 새로운 상태 값으로 교체	렌더링 간에 동일한 객체를 유지(current)
값 업데이트 방식	setState를 통해 상태 값을 변경	ref.current 를 직접 수정
렌더링 여부	값이 변경되면 컴포넌트를 다시 렌더링 함	값이 변경되어도 화면에 영향을 미지치 않음
DOM 조작 가능 여부	DOM 요소에 직접 접근할 수 없음	DOM 요소를 직접 참조하고 조작 가능(ref)
데이터 초기화 여부	컴포넌트가 리렌더링 될 때마다 상태 값 재설정	리렌더링 시에도 값이 초기화 되지 않음
주요 사용 사례	- 사용자 입력 처리 - 상태에 따라 UI 동기화 - 상태 변경 트리거	- DOM 요소 포커스 - 값 저장 및 이전 값 추적 - 렌더링 없이 값 유지

 

 

* useRef와 리렌더링

const Register = () => {

    const refObj = useRef(0);
    console.log("Register 렌더링");

    return (
        <div>
            <button onClick={() => {
                refObj.current++;
                console.log(refObj.current);
            }}>++</button>
        </div>
    )
}

export default Register;

 

 

- 위처럼 코드를 작성하고 console 창을 보면, 버튼을 눌러도 "Register 렌더링"은 처음 한 번만 출력 되는 것을 볼 수 있다.

  즉, 값이 변경되어도 리렌더링하지 않는다.

 

 

 

* useRef와 DOM 제어

const Register = () => {

    const inputRef = useRef();

    const onSubmit = () => {
        if(input.name === ""){
            // 이름을 입력하지 않으면 이름을 입력하는 DOM 요소 포커스
            inputRef.current.focus();
        }   
    }

    return (
        <div>
            <div>
                <input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder="이름" />
            </div>
            <button onClick={onSubmit}>제출</button>
        </div>
    )
}

export default Register;

 

 

- 위처럼 코드를 작성하고 name 값이 비어있는 상태에서 제출 버튼을 누르면, 이름 입력 필드에 포커스가 이동하는 것을 

  확인할 수 있다. 이는 useRef를 사용해 DOM 요소를 직접 조작했기 때문이다. 즉, 입력값이 비어 있어도 리렌더링 없이 

  즉시 포커스를 설정할 수 있다는 점이 useRef의 주요 특성이다.

 

 

* 그렇다면 JavaScript 변수를 사용하면 안될까?

  입력을 하면 카운트가 늘어나는 코드를 작성해보자

const countRef = useRef(0); // 초기값이 0인 ref
let count = 0;	// 초기값이 0인 일반 변수

const onChange = (e) => {
    countRef.current++;
    count++;
    console.log("ref : " + countRef.current);
    console.log("count : " + count);
    setInput({
        ...input,
        [e.target.name] : e.target.value
    })
}

 

- 일반 변수(count)

 : count는 컴포넌트가 리렌더링될 때마다 초기화됨. 이유는, 일반 변수는 렌더링마다 함수가 새로 호출되므로 매번 새로운 값으로 덮어씌워짐. 즉, 변경은 즉시 적용되지만 지속성이 없음.

- useRef(countRef)

 : useRef는 컴포넌트가 리렌더링되어도 초기화 되지 않음. 컴포넌트가 마운트된 이후에 계속 값이 누적됨.

 

 

 

React.js 입문

React Hooks

 

* React Hooks 란? 리액트 버전 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태관리와 라이프 사이클 메서드 같은 기능을 사용할 수 있도록 도와준다.

 

* Hooks의 특징

- 클래스 컴포넌트 대체 : 함수형 컴포넌트에서도 state와 lifecycle을 사용할 수 있어 클래스 컴포넌트 대체 가능

- 순수 자바 스크립트 함수 : 함수형 컴포넌트는 간결하고 재사용 가능한 로직 작성에 적합

- 추가 기능 제공 : 기존에 없던 '커스텀 훅(Custom Hooks)'을 통해 로직 재사용 가능

- 호출 순서 보장 : React는 훅 호출 순서를 보장하기 때문에 상태 관리 및 렌더링이 안정적임

 

* Hooks 사용 규칙

- 최상위에서만 호출 : 조건문, 반복문, 함수 내부에서 호출하면 안되며 항상 컴포넌트 최상위에서 호출해야 함.

- React 함수형 컴포넌트에서만 사용 가능 : 클래스 컴포넌트에서는 사용할 수 없음

- 커스텀 훅 생성 가능 : 로직을 재사용하기 위해 use로 시작하는 커스텀 훅을 만들 수 있다.