[React] 상태관리와 훅

상태

상태

컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터

→ boolean, String, number 등의 자료형뿐만 아니라 객체, 서버에서 불러오는 데이터 등 모든 것

조건부 렌더링

✅ 삼항 연산자

{조건?(참):(거짓)}
{isClicked ? alert("참"):alert("거짓")}

✅ &&

{조건 &&(참)}
{isClicked && alert("참")}

✅ ||

{조건 &&(참)}
{isClicked && alert("거짓")}

useState

💡 state란 변수. setState는 state값을 변경시켜주는 함수. useState는 state, setState를 return하면서 초기값을 설정해주는 hook.

 

✅ let, const와는 다르게 렌더링이 되는 변수이기 때문에, useState를 사용한다.

✅ 렌더링이 일어나는 조건

1. props가 바뀔 때
2. state값이 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때

불변성

불변성을 지킨다는 것이란 어떤 값을 변경할 때 그 값을 직접적으로 변경하지 않고 새로운 값을 새로 만들어서 변경하는 것을 의미 → state를 직접 변경하는 것이 아니라, setState로 새로운 값을 만들어서 변경

리액트는 불변성을 지킬 때, 리렌더링이 되도록 짜여져있다.

기본형

const [state, setState]=useState();

 

+@

꼭 state, setState 형식으로 써야할까? → nope! 그냥 const [one,two]=useState() 이런식으로 써도 된다! → 모든 자료형 다 쓸 수 있다!

const [number, setNumber]=useState(0);
const [isClicked, setIsClicked]=useState(false);
const [name, setName]=useState("gamja");
const [items, setItems]=useState(["휴대폰", "노트북", "tv"]);
const [userData, setUserData]=useState({
            imageFile:new FormData(),
            ID:"",
            PW:"",
            name:"",
});

 

prev

💡 prevState 기존값을 유지하면서 변경하고 싶은 사항이 있을 때 사용하는 안정적인 방법

 

const [bye, setBye] = useState({
    color: "blue",
    comment: "즐거우셨나요?",
  });

setBye((prev) => ({ ...prev, comment: "감사합니다" }));

useEffect

💡 useEffect(effect, [deps])
effect는 함수, 그래서 화살표 함수로 ()⇒{}를 쓴다 deps는 배열

 

✅ useEffect는 처음 렌더링될 때, 혹은 값이 변할 경우 원하는 액션이 있을 때 사용한다.

✅ useEffect를 사용하는 기점

💡 리액트의 life-cycle에 대해 알아보자!

life-cycle은 mount:컴포넌트가 나타남 → componentDidMount update:컴포넌트가 업뎃됨 → componentDidUpdate unmount:컴포넌트가 사라짐 → componentWillUnmount 으로 이루어지는데, 처음 렌더링될 때, 변경사항이 있을때, 사라질때(unmount때에는 deps 부분을 아예 안 쓴다.) 사용한다.

 

 

✅ 비동기 처리에 대해서. useEffect와 비동기가 왜 연관있나

💡 React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컫습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이죠.

 

 

리액트 useEffect 개발자가 알아야 할 네가지 팁

기본형

useEffect(()=>{
	alert("맨 처음 렌더링 시에 나타나요")
},[])

useEffect(()=>{
	alert("name이라는 변수가 렌더링될 때마다 나타나요")
},[name])

useRef

💡 ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. - React 공식문서 中

ref는 js에서 getElementById, querySelector로 특정 DOM에 접근했던 것처럼 DOM을 선택하게 하는 일반객체.
ref를 사용하기 위해 사용하는 hook이 useRef. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다.

 

 

 

사용

• JS로 DOM 요소에 focus 하기, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

*이 외에도 useReducer, useMemo 등 훅의 종류는 상당히 많고, 심지어 내가 훅을 커스터마이징해서 쓸 수도 있어요

state와 props

state

컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터

props

💡 properties의 줄임말 : 컴포넌트간 전달 되는 state : 부모 컴포넌트 → 자식 컴포넌트로 전달해주는 데이터 : 쉽게 말하면 읽기 전용 데이터

 

 

→ 그냥 컴포넌트 간 뿐만 아니라, 스타일드 컴포넌트 간에서도 props 주고 받기가 가능합니다!