React Study
1.React - CRA 생성하기
Node.js 기반의 웹서버 위에서 동작하고 있으면서 webpack, Babel 패키지들이 이미 구성된 Boiler Plate를 설치create react app을 할 폴더를 새로 만들어준다.vsCode로 이동 후, 터미널 창에 해당 명령어를 입력한다create-rea
2.React 왜 필요한가요?
React가 필요한 세가지 이유
3.DiaryApp - 새로운 일기 작성하기
작동 방식 다음과 같이 사용자가 데이터를 입력 후, 저장 버튼을 누르면 리스트에 append 되는 기능을 구현 할 때 필요한 로직에 대해서 기록하고자 합니다. 구조 뜯어보기 현재 수행하고 있는 프로젝트는 다음과 같은 구조를 지니고 있습니다. App.js : 부모
4.DiaryApp - 수정기능 구현하기
수정 기능 구현하기..
5.React - useEffect에 대해 알아보기
React의 LifeCycle을 관리
6.DiaryApp- useEffect를 통해 API 호출
useEffect 활용
7.리액트 최적화 - useMemo()
useMemo() 활용하기
8.DiaryApp - useCallback()을 활용한 최적화 작업
최적화 - 렌더링 이슈
9.DiaryApp - useReducer()를 활용한 상태함수 관리
React의 단방향성 데이터 흐름이라는 특징으로 인해, App 컴포넌트에서 useState로 state를 정의하고, 각각의 컴포넌트에 데이터(state)를 흘려보내기 위해 stateful한 함수로 정의하여 props를 전달하는 형식으로 state를 끌어올리며 작업을 수
10.DiaryApp - useContext()로 props drilling을 방지해보기-(1)
지금까지 일기앱의 컴포넌트간 data 흐름을 도식화하면 위와 같습니다. 크게 4가지 컴포넌트로 이루어졌는데 이때 DiaryList 컴포넌트에 대해서 잠깐 설명드리고자 합니다.DiaryList 컴포넌트는 App 컴포넌트에서 useReducer로 받아온 data를 리스트
11.DiaryApp - useContext()로 Props Drilling 방지해보기 - (2)
이전 포스팅 에 이어서 상태관리 함수들을 useContext()로 관리해봅시다. App 컴포넌트의 return 부에 export한 Context를 컴포넌트로 선언합시다.과연 이렇게 쉽게 끝날까요? ㅎㅎ 당연히 아니죠. (\*data는 state를 담음) 질문 1.Dia
12.페이지 라우팅 - React Router 라이브러리
리액트는 대표적인 SPA 기반의 CSR방식으로 페이지 라우팅이 동작됩니다. 여기서 SPA 그리고 CSR에 대해서 한번 짚을 필요가 있습니다. SPA는 Single Page Application의 약자로, 최초 한번 로드 시 클라이언트는 데이터만 수정해서 실행할 수 있는
13.React에 Type적용하기
타입스크립트의 Types는 자바스크립트의 동적 타입(Implicity) 으로 인해 야기될 수 있는 문제를 해결할 수 있는 강력한 기능입니다. 이를 리액트 컴포넌트의 props에 대한 타입을 잡을때 유용하게 쓰일것입니다. 리액트에서는 FunctionComponent 라는