Veloperty-React

Goofi·2023년 1월 11일

✈️Veloperty React

해당 게시물은 제가 React 몇몇 내용들을 잊어버렸을 때 다시 보기위한 게시물입니다.
React에 대해서 정확하게 학습하고 싶으신 분은 아래 링크를 참고하실 바랍니다.
벨로퍼티와 함께하는 모던 리액트

6. 조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는것을 의미

📌삼항연산자 사용

<div>
	{isSpecial ? <b>안녕하세요!</b> : null}
</div>

삼항연산자를 사용한 조건부 렌더링을 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용한다.
단순히 특정 조건이 true이면 보여주는 경우 &&연산자를 사용해서 처리하는 것이 간편하다.

📌&&연산자

<div>
  {isSpecial && <b>안녕하세요!</b>}
</div>

📌props 값 설정을 생략하면 = {true}

function App(){
	return(
      <>
        <World color="skyblue" isSpecial />
      </>
    )
}

isSpecial = {true}이다.

7. useState 통해 컴포넌트에서 바뀌는 값 관리하기

리액트에서 엘리먼트에 이벤트를 설정해줄 때에는 on이벤트이름 = {실행하고싶은함수}형태로 설정해주어야 한다.

onClick = {onIncrease()}

9. 여러개의 input 상태 관리하기

input의 개수가 여러개가 됐을때는, 단순히 useState를 여러번 사용하고 onChange도 여러개 만들어서 구현 할 수 있다. 하지만 그 방법은 가장 좋은 방법은 아니다. input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 그리고, useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다.

InputSample.jsx

🔥가장포인트!!
객체 복사 후 객체를 추가할 때 [name] : value

시간나면 참고
https://medium.com/@bretdoucette/understanding-this-setstate-name-value-a5ef7b4ea2b4

import React, {useState} from "react";

function InputSample(){
  const [inputs, setInputs] = useState({
  	name : '',
    nickname : ''
  });
  
  const {name, nickname} = inputs;
  
  const onChange = (e) => {
  	const { value, name } = e.target; //비구조화 할당
    //const value = e.target.value;
    //const name = e.target.name;
    setInputs({
    	...inputs, //기존의 input 객체를 복사한 뒤
        [name] : value //name 키를 가진 값을 value 로 설정
	})
    
    const onReset = ()=>{
   		setInputs({
        	name : '',
            nickname:'',
        })
    };
    
    return(
    	<div>
        	<input name="name" placeholder="이름" onChange={onChange} value={name} />
        	<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} />
        <button onClick={onReset}>초기화</button>
        	<div>
              <b> 값 : </b>
              {name} ({nickname})
        	</div>
        </div>
    )
  }
  
  export default InputSample;

리액트 상태에서 객체를 수정해야 할 때에는,

inputs[name] = value;

이런식으로 직접 수정하면 안된다.
그 대신에, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 한다.

setInputs({
	...inputs,
  	[name] : value
})

이러한 작업을 "불변성을 지킨다"라고 부른다. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지할 수 있고 이에 따라 필요한 리렌더링이 진행된다. 만약에 input[name]=value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않는다.

추가적으로, 리액트에서는 불변성을 지켜주어야만 컴퓨넌트 업데이트 성능 최적화를 제대로 할 수 있다.

정리
리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 한다.

10. useRef 로 특정 DOM 선택하기

📌리액트에서 DOM을 사용하는 상황

특정 엘리먼트의 크기를 가져와야 할 때
스크롤바 위치를 가져오거나 설정해야 할 때
포커스를 설정해야줘야 할 때

추가적으로 Viedeo.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생한다.

📌ref를 사용 할 때에는 useRef라는 Hook 함수를 사용한다.

사용)
InputSample.js에서 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef를 사용하여 기능 구현 → 아래 코드 참조

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

function InpustSample(){
    const [inputs, setInputs] = useState({
        name : '',
        nickname : ''
    });

    const nameInput = useRef();

    const {name, nickname} = inputs; //비구조화 할당을 통해 값 추출

    const onChange = (e) =>{
        console.log(e)
        const {value, name} = e.target //우선 e.target 에서 name과 value를 추출
        setInputs({
            ...inputs, //기존의 input 객체를 복사한 뒤
            [name] : value //name 키를 가진 값을 value로 설정
        })
    }

    const onReset = ()=>{
        setInputs({
            name : '',
            nickname:''
        })
        nameInput.current.focus();
        console.log(nameInput)
    }

    return(
        <div>
            <input 
                name="name" 
                placeholder="이름" 
                onChange={onChange} 
                value={name} 
                ref={nameInput}
            />
            <input 
                name="nickname" 
                placeholder="닉네임" 
                onChange={onChange} 
                value={nickname} 
            />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 :</b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default InpustSample;