커링 반환값이 함수인 디자인 패턴을 말함 중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 언제든지 사용할 수 있음 커링을 사용하는 이유 : 함수의 재활용 때문 함수의 재활용 예시 : function multiply(a, b) { return a * b; } function mulitplyTwice(a) { return multiply(a, 2); } // ⓐ function multiplyX(x) { return function(a) { return multiply(a, x); } } // ⓑ const multiplyX = x => a => multiply(a, x); // ⓒ​ └ ⓐ : multiply() 함수를 재활용하여 a에 2를 곱한 값을 반환함 └ ⓑ : 인자 x를 받아 이름 ..

컴포넌트에서 콜백 함수 콜백 함수란 정의된 위치에서 실행되지 않고, 이후 특정 상황에서 실행되는 함수를 말함 하위 컴포넌트에서 프로퍼티를 변경해야 할 때 프로퍼티 원본을 수정할 수 있는 함수를 하위 컴포넌트에 제공하면 됨 따라서, 콜백 함수를 프로퍼티로 전달하면 됨 콜백 함수로 프로퍼티 수정 : (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..