📅2023.09.26

💡 React

1. Component란?

APP을 이루는 최소 단위
-> UI 재사용 가능한, 개별적인 여러 조각으로 나눔
-> props/state값을 받아 DOM 노드 생성

2. State란 ?

-> 컴포넌트가 가지고 관리하는 동적인 값으로 값과 상태 변화 함수를 가짐
-> state가 변화하면 화면을 다시 그려 rerender함
-> state를 관리하기 위해 사용하는 hook : useState()

3. Props란 ?

-> properties : 컴포넌트 속성 설정 시에 사용하는 요소
-> 가장 기본적이고 효율적인 방법

useState() 실습

import React, { useState } from "react";

export default function State() {
    const [message, setMessage] = useState("");
    const onClicklast = () => setMessage("9기");
    const onClickthis = () => setMessage("10기");

    const [countUp, setCountUp] = useState(0);
    const [write, setWrite] = useState("");

    function count() {
        setCountUp(countUp + 1);
        console.log("Count 값이 바뀜");
    };

    function handleChange(e) {
        setWrite(e.target.value);
        console.log("input 값이 바뀜");
    };


    return (
        <>
            <button onClick={onClicklast}>2021</button>
            <button onClick={onClickthis}>2022</button>
            <h1> { message } </h1>
			<div>------------------</div>
            <div> { countUp }
                <button onClick={ count }>+1</button>
                <input 
                    type="" 
                    onChange={ handleChange }
                />
                <div>
                    { write }
                </div>
            </div>
        </>
    )
};

4. React Life Cycle & useEffect()

-> 생애 주기의 단계별로 행동 양상, 특징이 달라짐
-> 초기화 작업, 예외 처리 작업, 메모리 정리 작업 등을 처리
-> 생애 주기에서 사용하는 매서드는 class 형에서만 사용 가능
-> useEffect라는 리액트 hook을 사용

// useEffect 연습
useEffect(() => {
}, []);

useEffect() 실습

useEffect(() => {
        console.log("렌더링 완료");
}, []);

5. useRef()

-> 리액트 컴포넌트 내에서 변수를 관리하기 위한 hook 중 하나로 state와는 다르게 동작함
-> 값이 바뀌어도 리렌더링 x
-> useRef로 관리하고 있는 변수는 설정 후 바로 최신 상태 조회 가능

useRef() 실습

// 1번 실습
const countNum = useRef(0);
const [submit, setSubmit] = useState();

<div>{ countNum.current }</div>
<button onClick={() => {countNum.current += 1}}>+1</button>
<button onClick={() => setSubmit(!submit)}>몇 번 눌렀나요?</button>

// 2번 실습
const [submit, setSubmit] = useState(true);
const msg = useRef();
const [inputText, setInputText] = useState("");

const handleTextChange = (e) =>{
  setInputText(e.target.value)
}

const handleSubmit = ()=>{
  setSubmit(!submit)
  msg.current = inputText;
}

<input 
  type="text" 
  onChange={handleTextChange}
/>
<button 
	onClick={handleSubmit}
 >전송</button>
<h2>전송된 단어 : {msg.current}</h2>