React.Fragment

• 안에 있는 요소를 감싸는주지만 실질적으로 component가 들어갔을 때 아무것도 남지않도록 하는 것.(div 요소를 남기고 싶지않을 때 사용.)
• <React.Fragment>를 사용하기 위해서는 import React from 'react’ 를 반드시 작성해야한다.
• React.Fragment는 <> </>와 동일하다!!

💭 React.Fragment가 필요할 때!?

1. css 적용 : div가 있으면 화면이 이상해질 수 있으니 fragment를 사용해주는 것이 좋다.
2. 테이블 요소를 사용할 때(테이블 요소 안에서는 div 태그가 들어가지못한다.)

useRef

• state: 값 변경 시 컴포넌트 리렌더링됨
  useRef : 값 변경 시 컴포넌트 리렌더링 되지않으며, 값이 저장된다.
  
• Input 태그에서 무언가를 입력 받는 상황에서 자주 사용된다.
  값을 계속 받는 중에 계속 리렌더링되면 안되기때문에 state가 아닌 useRef를 사용해야한다.

// input을 이용한 예시코드

import React from 'react'
import { useRef } from 'react';
import { useState } from 'react'

export default function TestRef() {
    const[text, setText] = useState("안녕하세요");

    const inputValue = useRef();


    function onChangeText() {
       setText(inputValue.current.value);
    }

  return (
    <div>
        <h1>{text}</h1>
        <input
        ref={inputValue}
        onChange={() => { onChangeText(); }} />
    </div>
  )
}

• useRef로 포커스 이동시키기 주로 로그인기능에서 사용한다.

  import React, { useRef } from 'react'
  
  export default function ChangeFocus() {
      const input1 = useRef();
      const input2 = useRef();
  
      const ChangeFocusOne = () => {
          input1.current.focus();
      }
  
      const ChangeFocusTwo = () => {
          input2.current.focus();
      }
      //기능요소 만들기(changeFocusOne과 Two), current는 DOM요소까지 접근
    return (
      <div>
          <input ref={input1} />
          <input ref={input2} />
          <br/>
          <button onClick={ChangeFocusOne}>1번</button>
          <button onClick={ChangeFocusTwo}>2번</button>
      </div>
    )
  }

조건부 렌더링

• 조건에 따라서 렌더링 할지 말지 결정하는 것 ⇒ 컴포넌트를 상황에 따라 켜고 끄기!
• JS, HTML에서는 Display 속성을 none으로 해서 처리하곤 했다.
• 리액트는 JSX문법을 사용하므로, if문 또는 3항연산자, 논리연산자와 html태그를 같이 쓰면 되기 때문에 상당히 쉽다.
• 변수로 처리해서 코드 정리도 가능하다!!

컴포넌트의 Life Cycle

useEffect

• 컴포넌트는 최초에 화면에 등장할 때(화면에 첫 렌더링) → Mount
• 다시 렌더링 → Update
• 화면에서 사라질때 → Unmount

1. useEffect(()⇒ { //작업} );

2. useEffect(()⇒{//작업}, [value]); 화면에 첫 렌더링 될때 실행, value값이 바뀔 때 실행

   **UseEffect (랜더링 될 때마다 매번 실행됨)

useEffect 는 인자로 콜백함수를 꼭 받는다. (()⇒{작업}} 와 같은 형태를 가진다.

→ 무거운 작업을 할 경우 매번 업데이트 때마다 실행되면 과중해질 수 있으니, 하나의 요소만 업뎃될 시 렌더링 되도록 할 수 있다. 위 [value] 를 값을 적어주면된다.

// 마운트 될 때마다 실행됨
        useEffect (() => {
            console.log('🥰 랜더링되었습니다');
        });

        // 마운트 + 카운트 변화될 때마다 실행됨
        useEffect (() => {
            console.log('😇 카운트');
        }, [count]);

        // 마운트 + 네임 변화될 때마다 실행됨
        useEffect (() => {
            console.log('🥸 네임');
        }, [name]);

        // 마운트 맨 처음 딱 실행될 때만 딱 한번 랜더링([]에서 배열에 빈값)
        useEffect (() => {
            console.log('🤗 맨 처음에만');
        }, []);

보통 컴포넌트가 서버로부터 데이터를 받아와야하는 상황에서 많이 사용한다.

• 컴포넌트가 최초 마운트 → 서버로부터 데이터를 요청 → 데이터를 state에 등록 → 해당 내용을 렌더링

Clean up - 정리

• return () ⇒ { 내용 } 리턴을 통해 정리할 수 있다.

export default function () {
    const [showTimer, setShowTimer] = useState(false);
	// 초기값은 false로 초기엔 실행하지않겠다는 의미.

    const Timer = (props) => {
        useEffect( () => {
            const timer = setInterval(()=>{
                    console.log('타이머돌아가는중..');
                }, 1000);
            return () => {
                clearInterval(timer);
                console.log('타이머가 종료되었습니다');
            };
            },[]);

    }
    
// 리턴값으로 클린값을 받았다 !
  return (
    <div>
        {showTimer && <Timer />}    
        <button onClick={()=> setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  )
}