목록Frontend/React (2)
너무너무 멋져 눈이눈이 부셔
리액트 디자인 패턴이란 디자인 패턴 : 프로그램 개발 과정에서 사용되는 설계 패턴. 리액트는 컴포넌트 단위의 활용이 굉장히 중요하므로, 이제 이 컴포넌트를 어떻게 구성할 것인가를 고민할 필요가 있음. 1. Presentation & Container 컨테이너 : 데이터 로직 수행 API호출, State관리, 이벤트 처리 등 변경된 상태 값을 props를 통해 Presentation 컴포넌트로 전달 프레젠테이션 : 데이터 출력 UI 표시 상태 관리x 컨테이너 컴포넌트가 전달해준 props를 받아 출력 특징 : 1. 컴포넌트 간 의존도가 낮고, Presentation 재사용가능 2. 역할 명확 3. state를 여러 컴포넌트에 props로 전달하여 상태 공유. 단점: 1. hooks 도입 이후로는 이 패턴 ..
1. npm 인스톨 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 이전에 프로젝트 만들었을 때 자기가 쓴 것들을 넣어준다. jest의 경우 안 썼으면 빼도 되겠지. 2. tsconfig.json 만들기 npx tsc --init 이렇게 하면생성된다. 설정 파일로, 어떤 규칙을 사용할 것인지 직접 써넣는 것이다. { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지..