React 완벽가이드
1.Section 1. 리액트 기초 및 Component, JSX, props
Component = HTML + (CSS) + JSReact는 모두 Component 기반으로 동작한다. component는 custom HTML 이라고 생각하면 된다. 1️⃣ reusable building blocks in user interface : 재사용성
2.Section 2. 리액트 State 및 이벤트 다루기
react에서는 기본 event handler들을 'on'으로 시작하는 props 형태로 component에 전달한다. 모든 event handler는 다음과 같이 function을 전달받아야 한다.onClick = {clickHandler}이때 주의할 사항은, onC
3.Section 3. map을 통한 리스트 렌더링 및 style 동적 적용
전달받은 data가 배열 혹은 객체로 이루어져 있을 때, 몇개의 데이터가 들어올지, 생성될지 우리는 모르기 때문에 인덱스에 하나하나 접근하여 하드코딩 하는 것은 비효율적일 뿐더러 사실상 불가능하다.때문에, map()을 사용해서 동적으로 rendering하는 방법을 사용
4.Section 4. 리액트 컴포넌트 스타일링
일반적인 in-line 스타일링의 문제점 하나의 컴포넌트에 해당 컴포넌트의 style.css import하여도 해당 컴포넌트에만 스타일이 적용되는게 아닌, 전체 컴포넌트에 적용되어서 같은 class 명을 가지는 선택자가 있을 경우 스타일이 적용되게 된다. 동적으로
5.Section 5. Fragment, Portals, Refs
JSX는 return할 때 한 개의 root를 가지고 return 되어야 하는 문법을 가지고 있다. 즉 중첩된 component를 그냥 return 하게 되면, Adjacent JSX elements must be wrapped in an enclosing tag. D
6.Section 6. useEffect, useReducer, Context API 사용하기
📍 Effect >UI와 직접적인 관련이 없는 것은 side effect라고 부른다. side effect들은 http request 보내기, 브라우저에 데이터 저장하기 등 화면에 UI를 rendering하는 기능 외의 것들을 담당한다. 즉 백엔드와의 통신에서 중요
7.Section 7. 리액트 최적화를 위한 useCallback, react.memo
리액트는 state가 변경되면 관련된 모든 component가 rerendering되는 특징을 가진다. 이는 만약 가장 상위 component에서 state를 변경하였을 경우, 해당 component의 자식 component들도 모두 재실행된다는 것을 의미한다. 이러
8.Section 8. Class Components
이제까지 함수형 컴포넌트에 대해 배웠다면, class를 기반으로 컴포넌트를 생성할 수 있음에 대해 알아보자. 요즘 거의 대부분의 경우에는 함수형 컴포넌트를 사용하지만, 공부하면서 종종 마주칠 일이 있을테니 간단하게만 정리해두려 한다.리액트 16.8버전 이전까지는 함수형
9.Section 9. HTTP 요청 보내기 Fetch API
📍 리액트와 백엔드의 데이터베이스 연결하기? 리액트 앱과 어떠한 종류의 데이터베이스가 있을 때 이 둘을 직접적으로 연결시켜서는 절대 안된다! 직접적으로 연결할 경우 데이터베이스의 인증 정보가 노출될 가능성이 높기 때문이다. 따라서 데이터베이스 자체와는 백앤드 앱이
10.Section 10. Custom Hook
Custom Hooks 결국은 함수이다. 함수인데, 안에서 상태 설정을 할 수 있는 로직을 포함한 함수이다. 또한 일반함수와 다르게 내부에서 리액트 내장 Hook이나 다른 custom hook을 사용할 수 있다. 숫자를 1씩 더하면서 세는 컴포넌트가 있고, 숫자를 1
11.Section 11. Form과 user input
📍 Form? Form에서는 하나 이상의 다양한 입력을 받기 때문에 다양하고 많은 양의 state를 다루게 된다. 하나 이상의 입력 값이 모두 유효하거나 모두 유효하지 않을 수 있다. 또는 서버로 request를 보낸 후에 특정 값이 사용 가능한지 확인하는 비동기 유
12.Section 12. Redux 기초
Redux? redux란 컴포넌트간의 전역 상태관리를 위한 라이브러리다. 이전 섹션에서 다룬 context와 같은 개념인데, context는 리액트에 내장되어 있는 툴킷인 반면 redux는 외부 라이브러리이다. Redux vs Context context와 Redux
13.Section 13. Redux 심화
Http request를 보낼 때 reducer 함수 내부에서 작성할 수 없다. 왜냐하면 http request는 비동기적인 작업으로 진행되는 반면 Reducer함수는 동기적으로 작동하기 때문이다. 그렇다면 redux와 Reducer함수를 사용해서 http reques
14.👀 Context API 너 뭐냐?
Context API 란 부모 컴포넌트가 어떠한 정보(데이터)를 만들고, 자신의 자식 컴포넌트들은 모두 해당 데이터를 사용할 수 있도록 만들어 props를 사용하지 않고 필요한 데이터를 넘겨주며 쉽게 값을 공유할 수 있게 해주는 리액트에 내장된 기능이다.다시 말해, R
15.useRef useCallback (DOM조작 방법과 최적화 관련)
📍 useRef란? > useRef는 .current프로퍼티로 전달된 인자로 초기화 된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. React 공식문서 - useRef useRef() 는 저장 공간 또는 compone