오늘 한 일
알고리즘 코드카타
개인과제 TIL 정리하기(useState 부분까지)
스탠다드반 5회차 강의
useContext 강의 다시 듣기
개인과제 진행
└ useContext로 적용
└ reduex 적용 (초기세팅)
오늘 공부한 내용
✅ push() 는 배열의 길이를 반환
result.push(-1) 에 return을 붙였더니 계속 1이 나오길래 (예상값 [-1])
찾아보니 push는 배열의 길이를 반환한다고 한다!
function solution(arr, divisor) {
let result = arr.filter(num=>num%divisor===0).sort((a,b)=>a-b)
if (result.length===0) {
result.push(-1)
}
return result
}✅ useEffect를 쓸 때는 dependency array를 꼭 생각하자
- dependency array 가 없는 useEffect는 렌더링될 때마다 계속 재실행되기 때문에 큰 의미가 없을 수 있음!
- ex) 1번과 2번은 완전히 동일
function App() {
// 1
console.log('1')
// 2
useEffect(()=>{
cosnole.log('1)
})
return (
<div>
</div>
);
}✅ ✨ 리액트의 배치 업데이트 ✨
리액트는 모든 수정사항을 때마다 바꾸지 않고 모아서 한 번에 수정함
(setState(count+1)을 여러번 해도 값은 한 번만 실행한 결과가 나옴
👉 실행한 만큼 수정하고 싶다면 setState((prev)=>prev+1)
✅ useState vs useRef
useState는 화면에 리렌더링 되고 useRef는 리렌더링 되지 않고 값만 가지고 있음
✔ useState로 화면에 변화가 생기면 그 때 useRef의 값도 따라 변함(값을 계속 가지고 있기 때문에)
✅ useRef vs let
🤔 useRef가 화면에 렌더링 되지 않고 값만 저장한다면 let 에 변수로 저장해서 쓰는 것과 무슨 차이가 있을까?
💡 useRef는 컴포넌트가 사라지지 않는 이상 값을 계속 유지하지만 (화면에 렌더링되지는 않음)
let은 화면이 리렌더링 될 때마다 값을 잃고 초기값으로 돌아감
✅ useContext 적용
📍 https://velog.io/@jetiiin/팬레터함-만들기-2-useContext
📍 https://velog.io/@jetiiin/팬레터함-만들기-3-redux
어려웠던 내용
리액트 작동원리나 심화내용으로 들어가면 바로 헷갈리고 잘 모르겠다 @_@
useRef 설명 들을 때는 이해했는데 써보라고 하면.. 글쎄 🤔 아직 잘 모르겠다
느낀점
- todoList 과제부터 만든 과정을 쭉 적고 있는데 (중간에 알게된 점 등 포함)
글이 길어지다 보니 이게 최선인가 하는 생각이 든다 🤔
(지나가는 누군가 : TIL 이렇게 쓰는거 아뉭데... )- 과정이 진행될수록 시간이 너무 빨리 간다
쫓아가기 바쁘단 소리겠지ㅎㅎㅎ
끝났을 때 많이 얻어갈 수 있도록... 💪
