React

DOM 을 직접 제어하는 경우바뀐 부분만 정확히 바꿔야 한다.DOM 을 직접 제어하지 않는 경우가상의 돔 트리를 사용해서,이전 상태와 이후 상태를 비교하여,바뀐 부분을 찾아내서 자동으로 바꾼다.State Change ⇒ Compute Diff ⇒ Re-renderSer

컴포넌트 내부에 상태가 있다면?class컴포넌트 내부에 상태가 없다면?라이프 사이클을 사용해야 한다면?class라이프 사이클에 관계 없다면?functionclassfunction

JSX 문법으로 작성된 코드는 순수한 JavaScript 로 컴파일하여 사용한다.BabelReact.createElement vs jsx가독성 완승!babel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움최상위 요소가 하나여야 함최상위 요소 리턴하는 경우, ()로

Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다.State 는 컴포넌트 내부에서 변경할 수 있는 데이터입니다.둘 다 변경이 발생하면, Render 가 다 시 일어날 수 있습니다.Props 와 State 를 바탕으로 컴포넌트를 그립니다.그리고 Prop 와

HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.JSX 에 이벤트를 설정 할 수 있습니다.camelCase 로만 사용할 수 있음onClick, onMouseEnter이벤트에 연결된 자바스크립트 코드는 함수임이벤트={함수}

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다.Initialization → Mounting → Updation(props/states) → UnmountingconstructorconponentWi

https://create-react-app.devnpm 5.2.0 이상부터 함께 설치된 CLIreact-scripts startStarting the development server…react-scripts buildCreating an optimized

(react-router-dom)브라우저에서 최초에 ‘/’ 경로로 요청React Web App 을 내려줌내려받은 React App 에서 ‘/’ 경로에 맞는 컴포넌트를 보여줌React App 에서 다른 페이지에 이동하는 동작을 수행새로운 경로에 맞는 컴포넌트를 보여줌np

advanced technique in React for reusing component logicnot part of the React APIa pattern that emerges from React’s compositional nature.HOC = functio

Hooks are a new addition in React 16.8npx create-react-app react-hooks-ex컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움컨테이너 방식 말고, 상태와 관련된 로직복잡한 컴포넌트들은 이해하기 어려움Class

Unit Test통합테스트에 비해 빠르고 쉬움통합테스트를 진행하기 전에 문제를 찾아낼 수 있음(통합테스트 성공보장 X)테스트 코드가 동작을 설명하는 명세가 됨(테스트를 읽고 어떤 동작을 하는지 예측 가능)코드를 수정하거나 기능을 추가할 때 수시로 빠르게 검증할 수 있음

필요할 때만 Render 한다.ReconciliationRender 전후의 일치 여부를 판단하는 규칙서로 다른 타입의 두 Element 는 서로 다른 트리를 만들어낸다.개발자가 key prop 을 통해, 여러 Rendering 사이에서 어떤 자식 Element 가 변경