[리액트 실습] 로그인 화면 만들기 0 (React Hooks - useEffect, useState )

* 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 

 

드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 

우선 개발에 앞서 이번 포스팅에서는 리액트 Hooks에 대해서 '간단히' 다루어보겠다. 

추후에 hooks의 많은 함수를 공부하고 Hooks를 자세히 정리해서 작성해보도록 하겠다. 

---

1. React Hooks 

Hooks

- 리액트의 새로운 기능 : React 16.8 버전에 새로 추가

- function 컴포넌트에서도 state를 관리할 수 있다.

- React의 여러 기능을 함수형 프로그래밍으로 사용할 수 있다. 

- lifecycle(라이프 사이클, 생명 주기)를 사용할 수 있다. 

 

Hook의 개요 – React

 리액트 hooks의 공식 자료이다! 

 

 

기본 Hooks

useState	동적 상태(컴포넌트의 state) 관리
useEffect	컴포넌트가 렌더링 될 때마다 특정작업 실행
useContext	여러개의 컴포넌트에서 사용할 수 있는 값을 만들 수 있음

이 외에도 useMemo, useCallback.. 등등 많은 Hooks가 있지만 우리가 이번 프로젝트에서 집중해서 볼 Hooks는 useState, useEffect 이므로 이 두 Hooks를 집중적으로 알아보도록 하자 

 

 

---

2. State vs Props

 

갑자기 왜 이렇게 기본적인 개념이 나오지..? 싶으실 수도 있다. 

바보필자가 계속 헷갈려서 적어놓는 부분이니 아시는 분은 가볍게 건너뛰시길 바란다. 

 

State	Props
자바스크립트 객체 렌더링 결과물에 영향을 주는 정보를 가짐
컴포넌트 안에서 관리  (함수 내에서 선언된 변수와 유사하다)	컴포넌트에 전달 (함수의 매개변수와 유사하다)

 

* componenet(컴포넌트) : 모든 리액트 앱의 구성품, 조각, 블록과 같은 요소이다. 일종의 재활용 가능한 UI조각이다. 

* 렌더링 : 진짜 간단하게 화면에 표시되는 것이라고 생각하면 된다. 

 

이 부분도 따로 자세하게 설명하는 포스팅을 작성하겠다. 

---

3. useState Hooks

: 컴포넌트에서 바뀌는 값 관리 

useState 훅은 리액트에서 state나 props의 값이 변경되면 이를 감지하고 리렌더링한다. 

즉, useState는 state의 값을 변경해주는 Hook이다. 

const [state,setState] = useState(기본값);

 

예시코드

useState에서 예시로  +1 , -1 버튼을 많이 보여준다. 

 

아래 예시를 통해 함께 설명해보겠다. 

Counter.jsx

import React, { useState } from 'react'

export default function Counter() {
	// 변하는 값 count, count를 변화시키는 setCounter를 입력 , 초기값 0으로 설정 
    const [count,setCount] = useState(0);
    
    //onClickAdd함수에서 setCount값이 +1씩 되도록 
    const onClickAdd= () =>{
        setCount(count+1);
    }
    //onClickSub함수에서 setCount값이 -1씩 되도록 
    const onClickSub = () =>{
        setCount(count-1);
    }


  return (
    <div>
        Counter
        <h1>{count}</h1>
        /* 버튼을 누르면 onClickSub, onClickAdd함수 실행 */
        <button onClick = {onClickSub}>-1</button>
        <button onClick = {onClickAdd}>+1</button>
    </div>
  )
}

App.js에 컴포넌트로 <Counter />를 리턴해주면 위 화면이 나온다. 

 

 

---

4. useEffect Hooks 

: 컴포넌트가 리렌더링될때마다 호출하여 특정 작업 실행

 

class형 컴포넌트에서 사용할 수 있던 life cycle를 함수 컴포넌트에서도 사용할 수 있게 되었다. 

useEffect Hooks는 리액트 컴포넌트가 마운트(처음 렌더링되었을 때), 언마운트(렌더링 된 컴포넌트가 사라질 때), 업데이트(특정 props)가 바뀔때 특정 작업을 처리한다. 

useEffect(()=>{
    console.log('마운트 될 때만 실행- deps:빈배열');
    },[]);

- function : 수행하고자 하는 작업 

- deps : 배열 형태이며 검사하고자 하는 특정 값 또는 빈 배열이 들어간다. 

공부하면서 deps를 비교하며 작성해 본 부분이다 참고가 되시길 ..

deps에 특정 값을 넣으면 컴포넌트가 마운트될 때, 업데이트 될 때, 언마운트될 때, 값이 바뀌기 직전 모두 호출이 된다. 

deps에 빈 배열을 넣으면 마운트될 때에만 호출이 된다.

 

---

예시 코드 

버튼 클릭 전 - 버튼 클릭 후

Timer.jsx

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;

App.js

import React,{useState, useEffect} from 'react'
import Timer from './components/Timer';
import Counter from './components/Counter';

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

  
  return( 
  
  <div>
      <div>
        <Counter />
      </div>
      <br />
      <br />
      <hr />
      <br />

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

  </div>

  );
}

export default App;

CSS 생략한 덕분에 App.js파일이 엉망이 되었다 .. ^^ 

---

다음포스팅에서는 이 useState, useEffect를 활용하여 만든 로그인 화면 만들기 개발에 본격적으로 들어가는 포스팅을 작성해보겠다 ~~ !