리액트를 다루는 기술

: 자바스크립트의 확장 문법: 브러우저에서 실행되기 전에 번들링 되는 과정에서 바벨이 일반 자바스크립트 형태의 코드로 변환해준다.JSX로 편하게 HTML을 작성할 수 있다.가독성이 높다리액트 16버전 부터 도입된 Fragment 기능을 사용해서 div를 사용하지 않아도

함수 컴포넌트클래스형 컴포넌트2장에서의 문법들은 함수 컴포넌트이다.render 함수가 꼭 있어야하고, 그 안에서 보여줄 JSX를 반환해야한다.함수 컴포넌트는 상대적으로 선언하기가 편하며 메모리 자원도 덜 사용한다.클래스형 컴포넌트는 state기능 및 라이프사이클 기능

이벤트 이름은 카멜 표기법으로 작성한다. ex) onClick이벤트에 함수 형태의 객체를 전달한다.DOM 요소에만 이벤트 설정이 가능하다.e.target.name 객체를 활용하여 input 여러개 state 다루면 편리하다

: DOM을 조작하기 위해 리액트 컴포넌트 안에서 id를 사용하는 방법id를 사용해도 되지만 DOM에서 id는 유니크해야하므로 같은 컴포넌트를 여러개 사용할 경우 중복되는 경우가 발생하게 된다.state로 필요한 기능 구현도 가능하지만 DOM 직접 사용해야하는 경우

을 활용하여 반복되는 컴포넌트를 렌더링할 수 있다.arr.map(callback, \[thisArg]) callback \- currentValue: 현재 처리하고 있는 요소 \- index: 현재 처리하고 있는 index값array: 현재 처리하고 있는 배열th

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 ~ 페이지에서 사라질 때 끝난다.컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야할 때, 불필요한 업데이트를 방지해야할 때 라이프사이클 메서드를 사용한다.라이프사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다.

yarn create react-app hooks-tutorial함수 컴포넌트에서 상태 관리const value, setValue = useState(0)useEffect(() => { console.log({name, nickname})})useEffect(() =>

리액트 전용 개발자 도구로 성능 분석이 가능하다.크롬 확장 프로그램https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihiF12로 열어보면 Co

사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것하나의 페이지로 이루어진 애플리케이션기존에는 각 페이지마다 다른 HTML로 제공하였다면, S