2021-12-29 수요일
🤍 일일회고
-
오늘의 도전과 배움
하드트레이닝 인프런알고리즘강의시작 -
학습하면서 궁금하거나 어려웠던 점
공식문서 읽기^^ -
내일 해보고 싶은 것들
팀프로젝트.......................... & 알고리즘 강의
조급해하지 않기. 나를 존중하기. 걱정할 시간에 공부하기ㅜㅜ
🖤 real world
Typescript의 type과 interface의 차이..
두세번 정도 설명을 들었는데 아직도 용어나 기술적으로 이해가 안 되는 부분이 많다. Typescript 문서?에서도 type이랑 interface를 마음대로 쓰라고 했다는데 그래도 조금은 무슨 느낌인지 이해하고 싶은데!! 토끼님이 typescript의 interface 개념을 마소라는 분이 c인가 java에서 가져왔다해서 자바스크립트나 프론트 쪽에서는 약간 중요한 개념은 아니다?! 라고 말씀하셨구 일단 좀 더 찾아봐야겠담.
참고
https://yceffort.kr/2021/03/typescript-interface-vs-type
무엇이 되었건 간에, 프로젝트 전반에서 type을 쓸지 interface를 쓸지 통일은 필요해보인다. 그러나 객체, 그리고 타입간의 합성등을 고려해 보았을 때 interface를 쓰는 것이 더 나을지 않을까 싶다.
react router - BrowserRouter vs HashRouter
난 지금까지 HashRoute의 #이 별로 깔끔하다 느껴지 않아서 BrowserRouter를 썼는데 오늘 토끼님이 개발할 때는 hashrouter로 연습하는 것도 좋다고 하셨다. hash와 browser말고도 memory, native, static 5가지 라우터가 있던데 나는 두개만,,
먼저 BrowserRouter를 썼을 때 새로고침을 하면 이전 history를? 참고 못해서 전체적으로 에러가 나서 해결하는데 애를 먹었었는데 이 아이는 동적인 페이지에 주로 사용된다 하고, HashRouter는 주소에 #가 들어가고 새로고침을 해도 에러가 발생하지 않고 검색 엔진이 읽지 못하며 정적인 페이지에 사용된다고 한다. history location을 지원하는 BrowserRouter을 주로 쓰고 HashRouter도 연습해봐야지.
참고
https://wonit.tistory.com/299
https://minjoo-space.tistory.com/61
💙 리액트를 다루는 기술 8장 Hooks
7장은 컴포넌트의 라이프사이클 내용인데 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능하고 봐도 뭔지 모르겠어서 8장으로 넘어갔음.
Hooks는 리액트 v16.8에 새로 도입된 기능으로 기존 함수형 컴포넌트에 없었던 상태 관리나 렌더링 직후 작업을 설정하는 등의 다양한 작업을 할 수 있게 해줌!
8.1 useState
가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌. 현재 상태와 상태를 업데이트할 수 있는 setter 함수 기능 두 값이 들어있는 배열을 반환하며 배열 구조 분해로 추출해서 사용함.
import React, { useState } from 'react';
const App = () => {
// const [상태값을저장할변수, 상태값을갱신할함수] = useState(초깃값);
const [count, setCount] = useState(0);
return (
<div>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}우리는 state를 const로 선언했는데 어떻게 값이 변했을까?
리액트의 컴포넌트 function은 최초에 한 번 실행되고 초기값으로 설정한 state를 기억하고 이벤트 등으로 setState가 호출되면 다시 컴포넌트가 실행되고(렌더링?) 이전 state 값과 비교해서 달라진 부분에 해당하는 DOM만 업데이트.. Virtual DOM의 원리도 잘 모르겠고~ㅜ
내가 예전에 자바스크립트를 열심히 공부할 때 힘들었던 비동기와 클로저 개념이 Hook의 핵심 원리라 이 부분을 다시 공부해야할 것 같다.
8.2 useEffect
리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook으로, 클래스형 컴포넌트의 componentDidMount(첫 렌더링을 다 마친 후 실행)와 componentDidUpdate(리렌더링을 완료한 후 실행)를 합친 형태로 보아도 무방함.
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
console.log('렌더링 완료');
}, []);
return (...);
};8.2.1 마운트될 때만 실행하고 싶을 때
업데이트될 때 실행하지 않고 처음 렌더링될 때만 실행하려면 함수의 두 번째 파라미터(dependency array)로 비어있는 배열을 넣음.
useEffect(() => {
console.log('마운트될 때만 실행됨.');
}, []);8.2.2 특정 값이 업데이트될 때만 실행하고 싶을 때
props 안에 들어 있는 value 값이 바뀔 때만 특정 작업을 수행함.
useEffect(() => {
console.log(value);
}, [value]);8.2.3 뒷정리하기
컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 뒷정리(cleanup) 함수를 반환하기.. 으윽
useEffect(() => {
console.log('마운트될 때만 실행됨.');
}, []);4.자바스크립트
5. Git
6. 영어
