2021.04.05(월)
여전히 뷰를 만지고 있구나 : )
1. Button.js
isLogout 스타일 따로 주기
2. Header.js
스크롤하면 header의 높이만큼 내려왔을때 배경색 바꾸기
►useEffect()를 쓰는 이유는?
-> useEffect는 컴포넌트가 렌더링 될때마다 특정작업 실행할 수 있도록 하는 Hook
►useState()
-> 리액트 컴포넌트에서 동적인 값 = 상태(state)
사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는것이 필요!
함수형컴포넌트에서 상태값을 관리해야 할 경우 useState함수를 사용한다.
❓ 여러개의 input값을 받을때는?
값을 객체형태로 받는다 =useState({name:'',nickname=''})
...spread문법 : 기존 객체를 복사해서 새로운 객체를 만들어서 상태를 업데이트 해주기!
→ 불변성을 지켜줘야만 리액트가 컴포넌트의 상태가 업데이트 된것을 감지하고, 필요부분만 리렌더링 할 수 있다. 기존상태를 직접 수정하면 리렌더링 되지 않는다.
Plus)Header.js에 scroll이벤트가 발생하면 배경색 변경하기
const Header = React.memo((props) => {
const headerChange = () => {
const navbox = document.querySelector(".nav");
if (window.scrollY > 105) {
navbox.style.position = "fixed";
navbox.style.zIndex = "1500";
navbox.style.backgroundColor = "black";
} else {
navbox.style.backgroundColor = "transparent";
}
};
React.useEffect(() => {
window.addEventListener("scroll", headerChange);
return () => window.removeEventListener("scroll", headerChange);
}, []);
3. footer -> 리액트스럽게 작성한다는 것은?
-
sns아이콘 필요
->yarn add react-icons설치 -
li를 그리드로
아싸리 잘됐다 그리드 제대로 짚고 넘어가자!
4. 데이터받기
3.1) 더미데이터 받아보기
3.2 ) api까지 받아보기
-open API로 받아올때 빈값(필드가)이 있으면 에러발생
-> 예외처리
TMDB API Key
-postman 설치(insomnia? 둘의차이는)
-인기영화 apiKey
https://api.themoviedb.org/3/movie/popular?api_key=127d1ec8dfd28bfe9f6b8d15f689cdd4&language=ko-KR&page=1
- Firebase 웹 프로젝트 생성
-yarn add -g firebase-tools
-yarn add axios
-reauest.js 함수모듈 파일
💦 오늘만난에러 git!!!
git과 브랜치를 어떡해야 할까...주여...멘토링 시간에 질문하기
오늘의 상황: 브랜치를 백업용으로 그냥 만들어놓았었는데, 내가 거기에 계속 커밋을 한듯,...
무튼 그래서 main이랑 merge를 시켰는데 터미널이 main에서는 yarn start가 제대로실행되지 않았고 branch일때 제대로 실행되었다.
그래서 계속 에러가 발생하고 파일이 제대로 커밋되었는지, 풀되었는지도 확실치 않아서 거의 2시간 넘게 잡고 있었다. 팀원들 덕분에 잘 끝냈다. 낼 분발해서 어려운 부분 끝내야겠다 : )
📢 참고하기
리액트훅, useEffect(), useState(), spread문법, 오브젝트의 불변성, 드림코딩
