✅ Hook
- 함수(Component)에서 어떠한 행동(state 관리 / lifecycle 관리)을 할 수 있도록 연동(hook in)해주는 "함수"를 의미
- hooks의 모임 ===
📌 Hook의 등장배경
- react 초창기,
- 클래스 컴포넌트에서만 state(상태)관리, lifecycle(라이프 사이클) 관리 기능을 사용할 수 있었다
- 이후,
-
함수 컴포넌트는 선언하기 편함, 직관적, 메모리 자원을 덜 사용하면서
⇒ 함수컴포넌트에 대한 니즈가 증가
-
📌 특징
- 함수 컴포넌트에서만 사용이 가능
- hook의 이름은 반드시 use-로 시작
- 내장 hook이 존재(useState, useEffect, ...)
- 직접 hook을 만드는 것도 가능(custom hook)
📌 사용 규칙
-
함수 컴포넌트 혹은 custom hook안에서만 호출
-
hook은 함수 컴포넌트 내 최상위(at the top level, 첫번째 중괄호 내부)에서만 호출해야함
✨ 단, 첫번째 중괄호내부라도
- return 아래에서는 호출할 수 없다 ❌
- 조건문, 반복문 등의 중첩되는 코드 블록 안에서 호출할 수 없다 ❌
import React, {useState} from "react";
const Test = () => {
const [color, setColor] = useState("red");
if(5 > 3) {
console.log('test');
}
return <div onClick = {setColor("blue")}>Hello! {color}</div>;
};
export default Test;✅ Props
- 컴포넌트의 속성값
→ 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체(단방향성 흐름을 가짐) - 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능
→ 문자, 숫자, 변수, 함수 등 … - tag에 속성을 주입하듯 자식 컴포넌트에 속성 값을 추가
💡 React의 불변성과 지켜야하는 이유?
React의 불변성과 지켜야하는 이유
리액트는 단방향성 바인딩
state가 위에서 다루어진다면, props로 내려야한다
✅ State
- UI에 보여줄 정보를 결정할때 사용할 수 있는 상태값
- 컴포넌트 내부에서 가지고 있는 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
💡 state와 props의 차이?
props와 state 모두 일반 javaScript 객체, 렌더링 결과물에 영향을 주는 정보를 갖고 있다
props : 함수 "매개변수"처럼 컴포넌트에 전달한다
state : 함수 내에 "선언된 변수처럼" 컴포넌트 안에서 관리된다
👉 참고 자료
ReactJS : Props vs State
Props vs State
📌 State 선언
useState hook을 호출할 때 초기값을 인자로 넘기고, 해당 함수의 결과로 반환되는 값을 구조 분해 할당을 통해 각각 state와 setState에 담아 사용하게 된다
💡 구조 분해 할당 ?
배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담을 수 있게 하는 javaScript 표현식
- 일반적으로 배열 안 각각 요소를 출력할 때, 인덱스로 접근
- "구조 분해 할당"을 사용하면, 할당된 변수를 통해 간단하게 배열 요소를 불러올 수 있다
const fruits = ['🍎', '🍌']; console.log(fruits[0]); // '🍎' console.log(fruits[1]); // '🍌' --------------------------------------------------------------- const [apple, banana] = ['🍎', '🍌']; console.log(apple); // '🍎' console.log(banana); // '🍌'
💡 useState hook의 호출 결과로 반환되는 배열의 요소
- state : 첫번째 요소, 동적으로 관리하고자 하는 상태값 => useState hook을 호출할 때 인자로 넘겨줌
- setState function : 상태값(state)을 업데이트하는 함수, state를 초기값에서 다른 값으로 변경하고 싶을때 => setState를 통해 변경할 수 있다
const [state, setState] = useState(초기값);
// state, setState의 이름은 자유롭게 사용 가능📌 State 적용
// Main.js
import React, { useState } from 'react';
const Main = () => {
const [color, setColor] = useState('red'); // 4 ~ 5
return (
<h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1> // 1 ~ 3
);
};
export default Main;-
먼저 h1 태그에 인라인 스타일을 적용
// < h1 style={} > -
여러 스타일 속성 중에 변경하고자 하는 것은 배경 색상이므로, backgroundColor를 적용
// < h1 style={backgroundColor: ""} > -
만약 backgroundColor의 value로서 정적인 값이 들어가게 된다면, 배경 색상을 동적으로 활용할 수 없게 된다 그렇기 때문에 backgroundColor : color와 같이 미리 선언한 state 값을 넣어준다.
-
그렇다면 처음 화면이 렌더링될 때 useState hook의 초기값인 “red”에 따라 h1 태그의 첫 배경색은 빨간색으로 그려지고,
useState(’blue’)로 초기값을 변경하면 화면에 그려지는 배경색 또한 파란색으로 나타나게 된다
📌 State & Event
적용 단계에서 값을 변경하기 위해서는 직접 state값을 수정해줘야한다
useState hook의 두번째 요소인 setState function을 활용하면 동적으로 변화를 줄 수 있다
// Main.js
import React, { useState } from 'react';
const Main = () => {
const [color, setColor] = useState('red');
return (
<>
<h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1>
<button onClick={() => setColor('blue')}>색상 바꾸기</button>
</>
);
};
export default Main;-
먼저 h1 태그 하위에 button 태그를 추가
버튼에서 발생하는 이벤트는 클릭 = onClick 이벤트 핸들러
해당 이벤트가 발생할 때 마다 실행될 로직을 넣어준다 -
여기서 실행시키고자 하는 바는 color 값을 “blue”로 바꿔주는 것
setColor 함수를 실행, 인자로 바꾸고자 하는 값인 “blue”를 넘김
“색상 바꾸기”라는 버튼을 클릭(이벤트 발생) => h1의 배경 색상변화
💡 state의 값을 변경하기 위해선 왜 setState()함수를 사용해야 할까?
- 단순 할당으로는 바뀐 값을 기준으로 화면이 다시 그려지지 않지만
- ✨ setColor 함수를 통해서 변경하게 되면 바뀐 값을 기준으로 다시 화면을 그려주는 것을 확인할 수가 있기 때문 !
✨ setColor를 통해 color의 값을 변경해야만,
값의 "업데이트"와 "리렌더링"의 효과를 볼 수 있다
