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

비동기 함수 비동기 처리를 위해 사용함 비동기 처리란? 작업 시간이 긴 A를 처리하느라 다른 작업들이 대기하고 있다면 다른 작업들을 먼저 진행하고 작업 A와 A와 연관된 작업을 이후에 처리하는 방식 ex) 서버에 데이터를 요청하고 결과를 기다리는 과정 기존 자바스크립트의 비동기 함수 처리 지연 작업이 필요한 함수에 setTimeout() 함수를 이용했음 지연 작업이 완료되고나면 실행되어야 하는 함수는 지연 작업 함수의 인자인 콜백 함수로 전달하여 처리했음 예시 : function do1(a) { setTimeout(() => a('작업 A'), 100); } function do2(b) { setTimeout(() => b('작업 B'), 200); } function do3(c) { setTimeout..

배열 함수 기존 자바스크립트로 Query String을 문자를 기준으로 분리하여 객체에 담아 변환하는 사용 예제 : function func(a) { var queryString = a.substr(1); var divide = a.split('&'); var result = {}; for(var i = 0; i < divide.length; i++) { var part = divide[i].split('='); var key = part[0]; var val = part[1]; result[key] = val; } return result; }​ 결과 : └ 이 때, 3002, 25, 1997을 문자열로 분리한다. 3002, 25, 1997을 문자열이 아닌 숫자로 변환하기 function func(a)..