📅 오늘 한 일
1. JS 공부
2. 리액트 / 리덕스 공부
3. 코테 문제 풀기
✏️ 무엇을 배웠나
1. 구조 분해 할당
구조 분해 할당(Destructuring assignment)은 참조형 데이터를 원시형 데이터가 변수 할당을 하듯이 하게 해주는 문법이다. 물론 객체나 배열에서 데이터를 따로 뽑아 변수 할당을 할 수는 있지만 코드를 길게 쳐야 되고 번거롭다. 구조 분해 할당은 1) 함수에 객체나 배열을 전달해야 할때 2) 객체나 배열에서 전체 데이터가 아닌 일부 데이터만 추출하고 싶을 때 고려할 할 수 있다.
리액트 훅인 useState 문법 자체도 배열을 구조 분해 할당한 것과 같고, props를 사용해 상위 컴포넌트에서 하위 컴포넌트에 데이터를 전달해줄 때 위 1)의 경우처럼 사용된다.
결론적으로 구조 분해 할당을 사용하면 객체나 배열 데이터에 직접 접근하지 않아도 변수를 통해 데이터를 꺼낼 수 있다!
// 배열에 변수를 지정하는 구조 분해 할당 기본 구문
const arr = [a, b, c]
const [1, 2, 3] = arr // 왼쪽항은 변수
// 결과 : 변수 1 -> a, 변수 2 -> b, 변수 3 -> c 2. 스프레드 문법
리액트에서 state 관리를 하면서 스프레드 문법이 헷갈려 한 번 더 공부했다. 배열은 참조형 데이터이기 때문에 일반적인 재할당을 하면 일반형과는 다르게 다른 데이터가 되지 않는다. 참조하는 곳은 같은 2개의 데이터가 생기는 것일 뿐임. 여튼 스프레드 문법을 사용하면 내가 원하는 배열을 완전히 다른 데이터로 복사할 수 있다.
const arr = [1, 2, 3, 4]
const copyArr = [...arr] // ...을 사용해 괄호를 벗겨내고 다시 배열에 넣었음3. 많이 쳐보는 게 답
자바스크립트든 리액트든 직접 쳐볼 때마다 이해가 선명해진다. 코드를 그냥 따라치는 건 최선의 학습 방법이 아니긴 하지만, 왜 이걸 따라 치고 있는지 지금 내가 뭘 치고 있는지 생각하면서 하면 스키마 생성 목적으로는 효과가 있다.
4. react router dom을 이용한 spa 구현 방법
전에 바닐라 자바스크립트로 라우팅을 했을 때 번거롭고 힘들고 어려웠던 작업이 이거 하나로 쉽게 끝났다. 그런데 난 이상하게 리액트보다 바닐라 자바스크립트에 대한 호감도가 더 높다. 고생과 고통을 좋아하는 건가. 여튼 오늘 얻은 키워드는 '다이나믹 라우팅', 'useLocation', 'useNavigate', 'Link API'다. 계속 익혀보자.
🏷️ 오늘의 코멘트
올해의 두 번째 눈이 내렸다.
