React (완료)

https://velog.velcdn.com/cloudflare/hoho_0815/98802beb-cd1b-4123-a7f4-faa17e9b5dab/react.jpg React.js > React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.출처 : 위키백과 > Why React.js ? React ...

Create-React-App https://velog.velcdn.com/cloudflare/hoho_0815/8a407f13-94e3-4338-bb47-147f658a1a56/react.jpg Create-React-App React App을 만드는 방법 라이브러리의 활용 React의 package를 다운로드 받는다고 바로 사용할 수는 없습니다...

JSX 문법 https://velog.velcdn.com/cloudflare/hoho_0815/ba70f484-46ca-4337-995a-bf1c850f379d/react.jpg JSX 문법a 들어가기 전 React 동작 방식 먼저 최상위 컴포넌트 정의 React App 이 작동하는 방식은 index.js 에서 id 가 root 인 요소를 찾고 그...

리스트 데이터 수정하기 https://user-images.githubusercontent.com/87301268/162167060-ab716306-f0c9-430b-acd8-d39a873e659b.jpg DiaryItem.js 생성되는 리스트의 아이템에 버튼을 추가 전반적인 가독성을 고려해 기존 onRemove 함수를 return 위에 따로 정의 ...

React Lifecycle React Lifecycle React 의 생명주기 Lifecycle ? > 생애주기 ( Lifecycle )일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정출처 : 국민 안정처 > 소프트웨어 개발에서도 Lifecycle 이라는 단어가 많이 사용 되는데 프로그램이 실행되고, 종료되는 과정을...

useEffect useEffect 함수형 컴포넌트에서 useEffect 를 이용해서 Lifecycle 를 관리 할 수 있습니다. 사용법 https://user-images.githubusercontent.com/87301268/162366198-07bc4447-77a6-4522-a6e9-a944cf9ba3c4.jpg useEffect 를 사용 합...

React에서 API 호출 React에서 API 호출 https://jsonplaceholder.typicode.com/ 을 사용 무료로 API 서비스를 제공해서 Test 를 할 수 있습니다 https://user-images.githubusercontent.com/87301268/162377991-87b57d9f-9869-4647-b10b-4eea...

최적화 - React.memo https://velog.velcdn.com/images/hoho_0815/post/e44d66f8-b850-44fc-8013-405050e46ccf/react.jpg 최적화 - React.memo 컴포넌트 재사용함수형 컴포넌트에게 업데이트 조건을 걸기 예시 컴포넌트 트리 ![https://user-images.gi...

https://velog.velcdn.com/images/hoho_0815/post/718f23c9-1a8c-49aa-b100-ca3e1b427381/react.jpg 최적화 - useCallback 문제점 전에 만든 일기 프로젝트에서 일기를 삭제하면 일기를 생성하는 Editor 가 렌더링이 됩니다. 테두리를 잘보면 깜빡 입니다. 일기를 삭제 하는 과...

https://velog.velcdn.com/images/hoho_0815/post/16a1c24c-2f2a-4aed-a341-79f8faace426/image.jpg useReducer 컴포넌트에서 상태변화 로직을 분리 필요성 https://user-images.githubusercontent.com/87301268/162678037-5f47f5d...

https://velog.velcdn.com/images/hoho_0815/post/e2955a04-e287-4736-a2e2-de2dd1d45153/image.jpg Context API 컴포넌트 트리에 데이터 공급 계층 구조 https://user-images.githubusercontent.com/87301268/162688798-2b448ac...

https://velog.velcdn.com/images/hoho_0815/post/9a16fc37-c349-47a0-af16-ad0399272585/image.jpg React SPA & CSR Routing ? https://user-images.githubusercontent.com/87301268/162889737-aa171115-32bf-4d...

https://velog.velcdn.com/images/hoho_0815/post/d0017ec1-327d-4891-9560-1ffb37356381/image.jpg CSR 라이브러리 설치 https://reactrouter.com/ 접속 Read the Docs 클릭 ![https://user-images.githubusercontent.com/87...

https://velog.velcdn.com/images/hoho_0815/post/6e783305-3dd4-4448-9131-a535d5a24b38/image.jpg React - Router 응용 https://user-images.githubusercontent.com/87301268/162952289-feaec8e1-ac2f-431a-ac21-3...

https://velog.velcdn.com/images/hoho_0815/post/7ee846f3-2c07-4ddd-9ead-b5b003549055/image.jpg React - img App 컴포넌트에 img 삽입 현재 폴더 구조 https://user-images.githubusercontent.com/87301268/163106269-9aa...

https://velog.velcdn.com/images/hoho_0815/post/387ba7eb-50e1-49ea-b469-9a879ba9580a/image.jpg 프로젝트 배포 준비 및 빌드 프로젝트 타이틀 변경 https://user-images.githubusercontent.com/87301268/163674697-c241f2ca-77a2-...