2주차 Front-E 스터디 TIL React

컴포넌트에 대한 이해 Component

컴포넌트는 App을 이루는 최소 단위이다!
ui를 재사용이 가능한, 개별적인 여러 조각으로 나눈다!
컴포넌트느 props/state 값을 받아 DOM 노드 생성

리액트에는 함수형 컴포넌트와 클래스형 컴포넌트가 존재한다!
=> 함수형 + hooks 사용

리액트에서 가장중요한 것은 State 인데,
컴포넌트가 가지고 관리하는 동적인 값으로, 값과 상태 변화 함수를 가진다.
컴포넌트는 자신이 가진 State가 변화하면, 화면을 다시 그려 rerender 한다.

useState() : state 관리를 위해 사용하는 hook이다
const [state, setState] = useState(초기값);

props란,
properties : 컴포넌트 속성 설정 시에 사용하는 요소
컴포넌트에 데이터를 전달하기 위한 기본적이고 효율적인 방법
부모 컴포넌트에서 설정하고 자식 컴포넌트를 수정하여 렌더링 -> 자식에서는 사용만 가능

props 사용하기 (자식)
-정적인 데이터 뿐만 아니라 동적인 데이터도 전달이 가능하다. props 변경 시에도 리렌더링이 일어난다.
-컴포넌트 자체도 props로 전달 가능함!!

실습 후 마무리.

생애 주기 React Life Cycle

React Life Cycle : 생애주기

생애 주기의 단계 별로 행동 양상, 특징 등이 달라진다.
개발에서도 마찬가지이다. 프로그램의 실행 ~ return ..

컴포넌트의 생명 주기를 제어한다는 것은,
각 생애 주기에서의 초기화 작업, 예외 처리 작업, 메모리 정리 작업 등을 처리하는 것

리액트는 기본적으로 각 라이프 사이클에서 사용되는 메서드가 존재하지만 Class형에서만 사용가능하다.

따라서 함수형 컴포넌트에서는 useEffect라는 React hooks를 사용한다.

실습 후 마무리

useRef()

리액트 컴포넌트 내에서 변수를 관리하기 위한 Hooks 중 하나로 State와는 다르게 동작함

값이 바뀌어도 리렌더링 X
State는 변경된 뒤에 그 다음 렌더링 이후로 최신상태를 조회 할 수 있는 반면,
useRef 로 관리하고 있는 변수는 설정 후 바로 최신 상태 조회 가능

useRef() 기본 사용법
const 변수명 = useRef(초기값);
변수명.current로 접근 및 사용

useRef로 DOM 제어하기
useRef()의 반환형인 React.MutableRefObject<>는
DOM에 접근할 수 있게 함

const contentInput = useRef();

<textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={handleChangeState}
          
/>

contentInput.current.focus();

실습 후 마무리

React Hooks에 취한다 - useState 15분만에 마스터하기 | 리액트 훅스 시리즈
https://www.youtube.com/watch?v=G3qglTF-fFI
아래는 youtube실습후 작성한 코드이다. (주석참고!), useState 마스터!

import logo from './logo.svg';
import {useState} from 'react';

const heavyWork=()=>{
  console.log("엄청 무거운 작업!!");
  return ["홍길동","김민수"];
}


function App(){
  const [names,setNames]=useState(()=>{
    return heavyWork();
  });
  //useState를 사용하여 초기값을 가져올 때 무거운 작업을 해야한다면, 그냥 가져오는 거 보다는 useState의 인자로 콜백함수를 넣어주고, 호출해서 내가 원하는 값을 가져오면 된다.
  //만약, const [names,setNames]=useState(heaveWork()); 로 작성하면
  //렌더링 할때마다 heavyWork()가 실행된다. 이를 방지하기 위해,
  //callback 함수를 작성하면 맨 처음 화면에만 heavyWork가 실행되고, 그 후에는 실행되지 않는다.
  const [input, setInput]=useState("");

  const handleInputChange = (e) =>{
    setInput(e.target.value);
  };

  const handleUpload=()=>{
    setNames((prevState)=>{
      return [input,...prevState];
    });
  }

  return(
    <div>
      <input type="text" value={input} onChange={handleInputChange}/>
      <button onClick={handleUpload}>Upload</button> 
      {names.map((name,idx)=>{
        return <p key={idx}>{name}</p>;
      })}
    </div>
  );
}

export default App;

React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈
https://www.youtube.com/watch?v=kyodvzc5GHU
아래는 youtube실습후 작성한 코드이다. (주석참고!), useEffect 마스터!

랜더링의 중요개념!

// //랜더링마다 매번 실행됨 - 랜더링 이후
  // useEffect(()=>{
  //   console.log("랜더링");
  // });

  // //마운팅 + count가 변화할때 마다 실행됨
  // useEffect(()=>{
  //   console.log("count 랜더링");
  // },[count]);

  // //마운팅 + name이 변경될때마다 실행됨
  // useEffect(()=>{
  //   console.log("name 렌더링");
  // },[name]);

  //마운팅 화면에서만 랜더링
  // useEffect(()=>{
  //   console.log("처음화면(마운트)에서 렌더링");
  // },[]);
 

## app.js

import logo from './logo.svg'; 
import {useState, useEffect} from 'react';
import Timer from './component/Timer';

function App(){
  const [showTimer,setShowTimer]=useState(false);

  return(
    <div>
      {showTimer && <Timer />}
      <button onClick={()=>{setShowTimer(!showTimer)}}>Toggle Timer</button>
    </div>
  );
}


export default App;

## Timer.js (**rsi 누르면 const Timer함수 기본세팅해줌)
import React, {useEffect} from 'react';

const Timer = (props) => {
    useEffect(()=>{
        const timer=setInterval(() => {
            console.log("타이머 돌아가는중...");
        }, 1000);

        return ()=>{
            clearInterval(timer);
            console.log("타이머가 종료되었습니다.");
        };
    },[]);

    return(
        <div>
            <span>타이머를 시작합니다. 콘솔을 보세요!</span>
        </div>
    );

};

export default Timer;

React Hooks에 취한다 - useRef 완벽 정리 1# 변수 관리 | 리액트 훅스 시리즈

코드를 입력하세요

React Hooks에 취한다 - useRef 완벽 정리 2# DOM 요소 접근 | 리액트 훅스 시리즈

import logo from './logo.svg';
import './App.css';
import {useRef,useEffect} from 'react';

function App() {
  const inputRef=useRef();
  
  useEffect(()=>{
    inputRef.current.focus();
  },[]);

  const login=()=>{
    alert(`환영합니다! ${inputRef.current.value}`);
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder='username'/>
      <button onClick={login}>로그인</button>
    </div>
  );
}

export default App;