Ellen's Web Note

라이프사이클 메서드 - 컴포넌트를 처음 렌더링할 때나 업데이트할 때 처리해야 할 작업을 실행시키는 메서드. - 라이프사이클 메서드는 클래스형 컴포넌트 에서만 사용. (단, 함수형 컴포넌트는 Hooks를 사용하여 비슷한 작업을 실행할 수 있음.) - Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행하는 메서드이고, Did접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행하는 메서드로 구분. 컴포넌트가 업데이트 되는 경우. 1. Props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 1. constructor 컴포넌트 생성자 컴포넌트를 만들 때 처음 실행되는 메서드로, state를 초기화할 때 사용..

state란? - 컴포넌트 내부에서 바뀔 수 있는 값. - 부모 컴포넌트에서 state를 props로 넘겨줄 경우 하위 컴포넌트는 state를 읽는 용도로만 사용할 수 있음. - 부모 컴포넌트로부터 넘겨받은 state값을 수정해야하는 경우 부모 컴포넌트에서 직접 state를 수정해야 함. - 컴포넌트 타입에 따라 state 사용 방법이 다름. 1. 클래스형 컴포넌트 (state) - this.state에서 state값을 초기화 하고, 값을 변경할 때에는 this.setState를 사용. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 ..

컴포넌트(component)란? * 재사용을 위한 특정 부분(기능)의 코드뭉치(모듈)의 단위 이미지와 같은 레이아웃을 생성할 때 일정관리(헤더) 컴포넌트, 검색 컴포넌트, 일정역역 컴포넌트, 각 일정(input 라인) 컴포넌트 총 4개의 컴포넌트로 구성됨. 컴포넌트 선언방식 1. 함수형 1. 클래스형 컴포넌트보다 선언이 쉬움. 2. 클래스형 컴포넌트보다 메모리가 가벼움. 3. 빌드했을 때 배포 파일이 클래스형 컴포넌트보다 작음. 4. React Hooks가 도입되면서 함수형에서도 state와 라이프사이클 사용이 가능해짐. 2. 클래스형 1. state기능 및 라이프사이클 기능을 사용할 수 있음. 2. 임의의 메서드를 정의할 수 있음. 3. render()함수가 꼭 있어야 하고, 그 안에서 JSX를 반환해..