컴포넌트에서 콜백 함수 콜백 함수란 정의된 위치에서 실행되지 않고, 이후 특정 상황에서 실행되는 함수를 말함 하위 컴포넌트에서 프로퍼티를 변경해야 할 때 프로퍼티 원본을 수정할 수 있는 함수를 하위 컴포넌트에 제공하면 됨 따라서, 콜백 함수를 프로퍼티로 전달하면 됨 콜백 함수로 프로퍼티 수정 : (src/App.js) import React from 'react'; import Counter from './ex/Counter2'; class App extends React.Component { constructor(props) { super(props); this.state = { count: 1 }; } increase() { this.setState(({ count }) => ({ count: cou..

클래스형 컴포넌트 클래스형 컴포넌트는 리액트 생명주기 함수와 컴포넌트 구성 요소를 모두 포함하고 있음 클래스형 컴포넌트는 Component와 PureComponent의 두 종류의 클래스를 사용함 Component Component 클래스는 프로퍼티, state와 생명주기 함수가 들어있는 구조의 컴포넌트를 만들 때 사용함 Component 클래스로 만들어진 컴포넌트는 항상 render() 함수를 호출함 Component 예시 : import React from 'react'; class MyComp extends React.Component { constructor(props) { super(props); console.log('생성'); } componentDidMount() { } myMethod() ..

컴포넌트 생명주기 컴포넌트의 생명주기란 컴포넌트의 생성부터 소멸까지의 과정을 말함 컴포넌트는 생명주기마다 함수를 가지고 있어서 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수 있음 생명주기 함수 생명주기 함수는 render() 함수를 포함한 총 8개의 함수가 있음 생명주기 함수는 리액트 엔진에서 자동으로 호출함 따라서, 개발자가 마음대로 생명주기 함수를 호출할 수 없음 └ 생성 과정 : 컴포넌트 생성부터 생성 완료까지 4개의 생명주기 함수가 호출됨 └ 갱신 과정 : 생성 완료부터 갱신 완료까지 5개의 생명주기 함수가 호출됨 이 때, 갱신 과정은 shouldComponentUpdate() 함수의 반환값이 true이면 이후 과정이 진행되고, shouldComponentUpdate() 함수의 ..

컴포넌트 상태 관리 프로퍼티의 특징 중 하나는 컴포넌트 내부에서 값을 바꿀 수 없음 이 때, 값을 바꿔야 하는 경우 상태(state)를 사용함 state로 상태 관리 state는 값을 저장하거나 변경할 수 있는 객체 보통 버튼을 클릭하거나 값을 입력하는 등의 이벤트와 함께 사용됨 state로 상태 관리 예시 (/src/ex/State) : import React from 'react'; class State extends React.Component { constructor(props) { super(props); this.state = { // ⓐ loading: true, formData: 'nothing' }; this.handle = this.handle.bind(this); // ⓑ setTim..

프로퍼티 프로퍼티 : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용함 프로퍼티 값은 수정할 수 없음 프로퍼티의 기본 class App extends React.Component { render() { return ( ); } }​ └ App 컴포넌트에서 프로퍼티를 Mycomp 컴포넌트에 전달했음 └ 속성 형태로 전달되는 값을 프로퍼티라 함 class MyComp extends React.Component { render() { const name = this.props.name; return {name}; } } └ Mycomp 컴포넌트에서 name이라는 이름의 프로퍼티로 전달받은 "hoony"라는 문자열 값을 render() 함수에서 참조할 수 있음 └ render() 함수에서 this.prop..

JSX JSX는 JavaScript XML의 줄임말 자바스크립트에 XML을 추가한 확장형 문법 자바스크립트와 HTML을 분리하여 작성하지 않고 동시에 작성 할 수 있어 편함 JSX 예시 (App.js): import React from 'react'; class App extends React.Component { render() { return ( // 아래의 내용이 JSX 안녕하세요 ); } } export default App;​ └ img의 맨 끝이 />로 끝남 └ JSX는 HTML이 아니라 XML 마크업 규칙을 따르기 때문 결과 : JSX와 기존 개발 방법의 차이 기존 index.js 코드 (index.js) import React from 'react'; import ReactDOM from ..