function Header() {
const router = useRouter();
/* useRouter() : React Hook의 종류
router 객체에 접근하기 위해서 useRouter를 사용한다
*/
const [isMenu, setIsMenu] = useState(false);
// 구조분해 할당 문법을 통해서 state에 default값은 false를 줌 모달창 on/off와 같은 논리
const handleOpenMenu = () => setIsMenu((prev) => !prev);
/*
prev => !prev의 논리
<button onClick={() => { setModal(!modal);}}> on/off버튼 </button>
약간 이거랑 같은 논리일까요?
여쭤본 결과 조금 다름 이 논리가 아니였음
참고로, prev를 감싸는 중괄호 태그 {}가 없는건 클린코드 의 사용이라고 함. if를 쓸때 return이 하나라면 {}를 생략 하는 방식. 하지만 if는 클린코드를 사용할때도 스코프를 명시 해주는게 더 직관적이다 라고 하셨고 {}를 쓰는게 바람직하다 라는 결론이 났다.
*/
const handleCloseMenu = () => setIsMenu(false);
// 간단히말해서 모달창을 보여주고싶지 않을때 false를 줘 서 닫아준다. 때문에
const handleRoutingToMainPage = () => {
router.push('/blog');
//blog.jsx로 라우팅
handleCloseMenu();
// mainpage로 이동하는데 menu가 열려있다면 우스꽝스러움때문에 사전에 방지하고자 넣은 코드인듯함.
}; return (
<>
<header className={styles.headerComponent}>
<div className={styles.headerIcon}>
<button type='button' onClick={handleRoutingToMainPage}>
<Image src='/imgs/dots.png' alt='Bott Logo' width='20px' height='20px' />
<span>뭘까</span>
</button>
</div>
<div className={styles.hamburgerContainer}>
<Tooltip title='Menu'>
<IconButton aria-label='sidebar-open' onClick={handleOpenMenu}>
<MenuIcon />
</IconButton>
</Tooltip>
</div>
</header>
<AnimatePresence>{isMenu &&
< Sidebar handleCloseMenu={handleCloseMenu} />}</AnimatePresence>
</>
);
}export default Header;
의문점1. AnimatePresence는 뭘까 뜯어봐야겠다.
Framer-motion이라고 디자인 라이브러리에서 사용하는 컴포넌트
라고 하셨다. 굳이 공부할 필요는 없을 듯 하다.
의문점2. prev => !prev 이건 잘 모르겠다..
배치 처리하기 떄문에 == 맞습니다 라고하셨는데 처음엔 뭔말인지 잘 몰랐었다. prev = !prev 이렇게 쳐보니까 해석이 됐다.
아주 간단히 prev에 prev의 불리언 반대값을 넣겠다는 의미가 된다. 즉 , default인 false의 반대값인 true를 넣겠다는 의미가돼서 모달을 실행할수 있었다. 또한 prev는 어떠한 예약어가 아니며 임의로 설정한 props 자체였고 함수형 업데이트에서 사용된 props임 ex ) hi = !hi (O)
- 깊은 깨달음 1. sideBar안에서 headerNav가 작동되도록 구성
header안에 component들을 집중시켜서 넣어왔었음
그렇게 import해서 사용했었는데 컴포넌트들을 각각 쪼개어 감싸주면 되는것이었음. 내 방법이 상당히 비효율적이였음
- 깊은 깨달음 2. link와 router의 기능 차이는 크게 없으나
link : 버튼을 눌렀을때 라우팅만 되면 될때 사용
router : 라우팅과 더불어 다른 기능들이 여러개 수반될때 사용 (기능을 함수로 묶기)
- 깊은 깨달음 3. prev는 어떠한 예약어가 아님.
함수형 업데이트에서 사용된 props에 불과함.
무조건 어떤 값이 들어가기만 하면 된다. 이전 값을 참조할 필요가 없으며 업데이트 되길 원하면 => setState에 직접적으로 값을 집어넣으면 된다.
여기서 문제 발생 => setState는 배칭을 통해서 여러개의 state가 있다면 단 하나의 리렌더링으로 묶는다고 함. 또한, 이전 값을 참조 하지 못함. => 이전값을 참조하고싶고 업데이트하고싶다면 props를 통해서 함수형 업데이트를 써야함.
ex ) prev => prev + 1;
- 배치(batch) : 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미
함수형 업데이트에 관련된 내용
함수형 컴포넌트들은 기본적으로 리렌더링이 될때, 함수 안에 작성된 모든 코드가 다시 실행됨
클래스형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render() 를 제외한 나머지 method 및 state는 그대로 보존이 되어 있음.
이는 함수형 컴포넌트들이 기존에 가지고 있던 상태(state)를 전혀 관리(기억)할 수 없게 만듦
그래서 함수형 컴포넌트를 Stateless Component 라고 했던 것.
단순하게 React에서의 state 만을 의미하는 것이 아닌, 함수내에 써져 있는 모든 코드 및 변수를 기억할 수 없다는 의미
⇒ 함수형 컴포넌트가 리렌더링될때 무조건 새롭게 선언 & 초기화 & 메모리에 할당이 됨
하지만 Hook의 등장으로, 브라우저에 메모리를 할당 함으로써, 함수형 컴포넌트가 상태(state)를 가질 수 있게 한 것.
⇒ 쉽게 말해서 함수 내에 써져 있는 코드 및 변수를 기억할 수 있게 됐다 라는 의미
출처 : https://velog.io/@dongdong98/React-Hook-%EC%B4%9D%EC%A0%95%EB%A6%AC#useeffect
