슬기로운 인턴 생활7 [이마고 웍스] 비가 많이 내렸다편

어진님이 알려주신 방법으로
매번 새로운 커밋을 시작하기 전에 간단하게 정리를 한다.









1. useState / uesEffect

메뉴를 선택했을 때 내가 지정한 id 값과 menu의 값이 당연히 같을 거라 생각했는데

결과는....?
console.log(menu) 에 찍히는 값이 한 박자 느렸다.






어진님도 예~전에 찾아보신 적이 있다면서

라고 검색해주셨다.

ㅋㅋ






useState가 한 박자 느린 이유는 비동기 함수이기 때문인데
이를 해결하기 위해서 useEffect나 callBack 함수를 사용한다.


하지만 내가 작성한 코드에서 id와 menu의 값을 동일하게 할 필요가 없기 때문에
그대로 두었다.








2. Props

menu가 선택 onClick 되었을 때는 파란색 바탕에 흰색 글씨
hover 되었을 때는 회색 바탕에 검은색 글씨가 되어야 한다.




하지만 이미 onClick 된 버튼에 hover가 적용되어 문제가 되었다.

위 코드처럼 작성될 경우 모든 버튼을 속성에 맞게 hover 시킨다.






이를 해결하기 위해

props을 사용했다.

선택된 menu에 props 조건을 적용하여 onClick된 버튼에 변화가 없도록 했다.





Props?
React가 사용자 정의 Component로 작성한 Element를 발견하면
JSX attribute와 자식을 해당 Component에 단일 객체로 전달






3. Hook

⇒ 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수




React에는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데
hook은 함수형 컴포넌트에서 사용한다.



로직의 재사용과 관심사 분리, 복잡성을 해결이라는 장점이 있다.

newsPage에서 useState를 사용했고 이를 hook으로 분리하였다.

useState는 하나의 컴포넌트 안에서 여러 번 사용할 수 있지만
관심사 분리와 재사용을 위해 각각의 파일에 따로 저장하였다.

------------------- 완성된 페이지 -------------------







api 연동하기 전에 useState를 사용해 Category 별로 기사를 분류했다.

그동안 프로젝트를 진행하면서 배웠던 것들을
notoin에 정리하고 있는데

다음엔 state와 LifeCycle 그리고 useEffect에 대해 정리를 해봐야겠다.









//











그리고 월요일에 비가 많이 왔는데..................





.
.
.






발표 준비를 해야해서 일상 이야기는 나중에 추가하도록,, 하겠다...,.,.