빅데이터 부트캠프 83일차

컴포넌트

- 리액트로 만들어진 앱을 이루는 최소 단위

- 데이터(props)를 입력받아 상태(state)에 따라 DOM Node(HTML 요소 객체)를 출력(return)하는 함수

- 함수형, 클래스형 두 종류가 존재

- 컴포넌트명 정의는 대문자로 시작

- 엘리먼트(Element) = 컴포넌트를 구성하는 리엑트에서 가장 작은 단위

ex) 2개의 엘리먼트를 출력하는 View 컴포넌트

import React from 'react';

function View({children}) {
    return (
        <>
            <h1>View</h1>
            <div>{children}</div> 
        </>
    )
}

export default View;

 

프로퍼티(props)

- 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터 (부모요소에서 설정)

- 프로퍼티는 컴포넌트 내부에서 수정 불가

- 프로퍼티로 문자열을 전달할때는 큰따옴표(""), 이외에는 중괄호({})를 사용함

- props 대신 비구조화 할당 문법으로 다른 명칭으로 적용가능

- children = 요소에서 태그 사이에 있는 텍스트 데이터

 

map

- 반복되는 컴포넌트를 렌더링하는 배열 객체 함수 (간결한 코드로 반복문 구현)

※ 렌더링 = HTML,CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

(새로고침 없이 즉각적으로 변경사항 반영)

- 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성

ex) const num = [1,2,3]

      const add = num.map((num) => num + 1); 

      console.log(add) = [2,3,4]

 

setInterval

- 특정 코드를 바로 실행하지 않고 일정 시간을 기다린 후 실행하기 위해 사용 (setTimeout()과 비슷한 기능)

- setTimeout()이 매개변수로 주어진 시간 후 딱 한번만 콜백함수를 호출하는 반면, setInterval()은 매개변수로 주어진 시간 간격으로 무한히 반복 호출 => setInterval()을 입력했으면 반드시 나중에 clearInterval()을 입력해 종료시켜줘야 함

 

Hook(훅)

- 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해줌

- 훅을 사용하기 위해서는 [import {훅명} from "react"]로 불러와야함

- state hook인 useState, effect hook인 useEffect, useRef 등이 존재

useState

- 상태(state) = 컴포넌트에서 동적인 값 (프로퍼티의 값을 바꾸기 위해 사용)

- import {useState} from 'react' 입력을 통해 {useState}를 불러온 후 useState()를 사용

- state(객체)와 setState()로 구성 (setState()는 state 객체에 대한 업데이트를 실행)

- const [state, setState] = useState(초기값); 형태로 시작 (const 정의시 state말고 다른 변수명 사용가능)

- 특정 DOM 객체에 이벤트 컴포넌트가 동작하려면 DOM 이벤트 프로퍼티(e)를 사용해야함

ex) 버튼을 누르면 1이 추가되면서 12를 넘기면 다시 1로 초기화되도록 설정한 함수

import React, { useState } from "react";

function UseState() {
    const [time, setTime] = useState(1); // time 초기값 1
    const updateTime = () => {
            setTime(time >= 12 ? 1 : (time+1)); // 12 이상이 되면 time=1 출력 아니면 time+1
    }
    return (
        <div>
            <span> Time : {time}</span>
            <button onClick={updateTime}>Click!</button>
        </div>
    )
}

export default UseState;

useEffect

- 어떤 컴포넌트가 마운트, 업데이트, 언마운트 시 특정 작업 코드를 실행시켜 주고 싶을때 사용하는 Hook

- [useEffect(콜백함수, 배열)] 형태로 입력 (useEffect에 사용되는 배열= Dependency Array라 부르고 생략 가능)

- 배열 없이 콜백함수만 입력할 경우 => 렌더링 될때마다 콜백함수 실행 (비효율적)

- 둘 다 입력한 경우 => 화면에 첫 렌더링 될때 & 배열에 입력한 요소가 변할때 콜백함수 실행

(만약 빈 배열 이면 첫 렌더링때만 실행)

import React, {useState, useEffect} from "react";

// 이 코드에서는 버튼 클릭시에만 렌더링 발생
function UseEffect() {
    const [number, setNumber] = useState(0); // number 초기값 = 0
    
    const updateNumber = () => {
        setNumber(number + 1); // 버튼 클릭시 number+1
    };
    
    useEffect(() => {
        console.log('useEffect'); // 렌더링될때마다 출력
    });

    useEffect(() => {
        console.log('useEffect : []'); // 첫 렌더링에만 출력
    }, []);
    
    useEffect(() => {
        console.log('useEffect : [number]'); // 첫 렌더링 + number가 바뀔때마다 출력
    }, [number]);
    
    return(
        <div>
            <div>
                <button onClick={updateNumber}>+1</button>
                <span>Current Number {number}</span>
            </div>
        </div> 
        );
 }
 
 export default UseEffect;

 

useRef

- ref 객체(current를 key로 useRef로 설정해준 데이터를 value로 가지는 객체)를 반환

- [const ref = useRef(ref 초기값)] 형태로 입력

ex) const myRef = useRef(0) => myRef = {current: 0}

- ref는 ref.current = "A"와 같은 형태로 값을 바꿔줄 수 있음

 

- 컴포넌트의 내부 변수들은 State가 변화하여 렌더링이 되면 초기화되지만 ref는 렌더링이 되어도 값을 유지함 

- ref의 값을 변화시켜도 State는 그대로라서 렌더링이 발생하지 않아 컴포넌트의 내부 변수들의 값은 그대로 유지됨 

=> ref값을 변화시켜도 렌더링이 발생하지 않아 웹 페이지에 표시가 안나서 (콘솔에서는 변화가 반영됨) State에 변화를 주어 렌더링을 시켜야 변화시켰던 ref값이 표시됨

- focus()를 이용하여 특정 DOM 요소에 접근을 할 수 있음

ex) input창을 클릭하지 않아도 자동으로 focus가 되어 바로 입력할 수 있게 해줌

import React, { useRef, useEffect } from "react";

function UseRef() {
    const inputRef = useRef();
   
    useEffect(() => {
        inputRef.current.focus(); // 렌더링 될때마다 자동으로 input창 포커스
    });
    
    // input 태그의 ref를 inputRef로 지정
    return (<input ref={inputRef}/>);
};

 

- useEffect 안에 useState의 setState()를 입력하면 렌더링 발생시 useEffect가 실행되면서 안에 있는 setState()가 실행되어 또 다시 렌더링이 발생하여 다시 useEffect를 실행시키기 때문에 무한루프에 빠짐 

=> 렌더링 수를 파악하려면 useEffect안에 setState()가 아닌 ref 객체를 입력하여 코드를 짜야 무한루프에 빠지지 않고 정상적으로 실행됨  

import React, { useRef, useEffect } from "react";

function UseRef2() {

	const [count, setCount] = useState(1);
    const [renderCount, setRenderCount] = useState(1);
	const refCount = useRef(0);
    
    useEffect(() => {
    	setRenderCount(renderCount + 1); // 무한루프 발생
        });
    
    useEffect(() => {
    	refCount.current = refCount.current + 1 // 무한루프 없이 정상 실행
        });
    
    return(
    	<div>
        	<p>Count : {count}</p>
            <button onClick={() => setCount(count + 1)}>Plus</button>
        </div>
        )
 };
 
 export default UseRef2;