리액트의 데이터 흐름은 단방향 흐름이기 때문에 부모 → 자식으로 흘러야 함예를 들어 대규모 프로젝트 일 수록 데이터의 변화에 따라 변경되는 컴포넌트들이 증가하게 됨상태 업데이트 또한 흐름을 지켜야 하기 때문에 상당히 복잡한 과정을 거치게 됨→ 유지보수가 점점 힘들어짐따

axios로 쉽게 외부 데이터를 호출하여 사용가능useEffect를 활용하여 처음 렌더링 시점에 데이터 호출useEffect에 async를 사용하면 X → useEffect에서 반환해야 하는 값은 뒷정리 함수 이기 때문→ 내부에 다른 함수를 만들어 async/await

single page application의 약자로 하나의 페이지로 이루어진 애플리케이션을 말함기존 웹페이지는 페이지 변경 시 서버에 요청하며 화면을 새로 불러옴이러한 방식은 많은 트래픽을 서버에서 부담해야함SPA는 뷰 렌더링을 사용자의 브라우저가 담당하고 로딩이 필요

yarn add immer두가지 파라미터를 사용첫번째 - 수정하고 싶은 state두번째 - 상태를 어떤 방식으로 업데이트 할지 정의하는 함수두번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면 produce 함수가 불변성을 유지를 대신 해주어 새로운 상태를 생

기존 일정관리 어플리케이션 코드를 리팩토링 진행React.memo 사용onToggle, onRemove 리렌더링 방지react-virtualized 렌더링 최적화현재는 하나의 값만 체크해도 App의 연결되어 있는 state이 변경 되기 때문따라서 해당 컴포넌트 아래 있

node-sass, classnames, react-icons 설치prettier 프로젝트에서 제시하는 요구사항 설정TodoTemplate - 화면 전체를 감싸는 레이아웃 컴포너틑TodoInsert - 할 일 입력 폼TodoList - 할 일 목록 컴포넌트TodoLis

기존 css 사용처럼 작성 후 import하여 적용yarn add node-sass로 설치사용 방법은 css와 동일공통으로 사용하는 부분은 분리하여 관리프로젝트 디렉토리가 깊어지면 해당 스타일을 import할 때 불편하기 때문에 설정../../../../utils.sc

state를 설정할 때 사용 (하나의 상태값만 관리)파라미터 - init 값을 넣어줌리턴 - state 값, state를 설정하는 함수컴포넌트가 렌더링 될 때 마다 특정 작업을 수행하도록 설정 가능componentDidUpdate + componentDidMount 를

컴포넌트의 라이프사이클이 존재하며 페이지의 렌더링 전 ~ 페이지가 사라질 때 끝난다.클래스형 컴포넌트에서만 사용 할 수 있고 함수형은 Hooks의 기능으로 구현이 가능라이프사이클의 종류는 총 9개Will 접두사가 붙은 메소드 - 작업이 동작하기 전 실행Did 접두사가

arr.map(callback, \[thisArg])callback 파라미터currentValue - 현재 배열 값index - 현재 배열의 indexarray - 현재 원본 배열thisArg(선택 항목) - callback 함수 내부에서 사용할 this예시컴포넌트 배

DOM을 직접적으로 건드려야 할 때 사용특정 Input에 포커스 주기스크롤 박스 조작canvas 요소 활용콜백 함수를 통한 ref 설정함수 내부에서 전달받은 ref 파라미터를 컴포넌트의 멤버 변수로 설정createRef 설정리액트 내장 함수 (v16.3)컴포넌트에도 r

event 이름의 표기를 camelCase로 표기해야 함 (onClick, onMouseOver)js 코드가 아닌 함수 형태의 값을 전달 해야함DOM 요소에만 이벤트를 설정 할 수 있다. (컴포넌트 X)SyntheticEvent는 브라우저 native event와 달

함수형 컴포넌트와 달리 state 기능과 라이프 사이클 기능을 사용 가능임의 메소드를 정의 가능render 함수가 필수로 있어야 하고 jsx를 반환해야 함함수형선언하기 편하다메모리 자원이 작다state, 라이프 사이클 api가 불가능 하다 (Hooks의 추가로 해결)클

[개인 스터디] 리액트를 다루는 기술 - 2장 JSX

[개인 스터디] 리액트를 다루는 기술 - 1장 리액트 시작