Step by Step

#7장 컴포넌트의 라이프사이클 매서드 모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 이 때는 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 업데이트를 발생시키는 뇨인 props 변경, state 변경, 부모 컴포넌트 리렌더링 => getDerrivedStateFromProps =>shouldComponentUpdate => true 반환 시 render 호출, false 반환 시 여기서 작업 취소 => render => getSnapshotBeforeUpdate => componentDudUpldate 7.2 라이프사이클 메서드 ..

#6장 컴포넌트 반복 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. 이 장에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아봅니다. const IterationSample = () => { return ( 눈사람 얼음 눈 사람 ) } export default IterationSample; 6.1 자바스크립트 배열의 map()함수 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다 6.1.1 문법 arr.map(callback,[thisArg])의 파라미터 callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는..

#5장 ref:DOM에 이름 달기 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아 작업이 쉽다. HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. const root = ReactDOM.createRoot(dovument.getElementById('root')); 5.1 ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접적으로 건드려야 할 때' * 리액트 컴포넌트에서 state 사용 ValidSample 컴포넌트 만들기 => input에 ref 달기 => 버튼을 누를 때마다 input에 포커스 주기 5.1.1 예제 컴포넌트 생성 import { Component ..

#4장 이벤트 핸들링 4.1.1 이벤트를 사용할 떄 주의 사항 1. 이벤트 이름은 카멜 표시법으로 작성(onclick->onClick) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 3. DOM요소에만 이벤트를 설정 가능(div,button,input,form)에는 가능, 직접 만든 컴포넌트에는 불가능 4.1.2 이벤트 종류 Clipboard, Touch, Composition, UI, Keyboard Wheel, Focus, Media, Form, Image, Mouse, Animation Selection, Transition 4.2 예제로 이벤트 핸들링 익히기 컴포넌트 생성 및 불러오기 onChange 이벤트 핸들링하기 임의 메서드 만들기 input 여러 개..