GDG on Campus Sookmyung

React에서의 불변성 유지 handleCreate = (data) => { // this.state.information.push(data); => 안됨! this.setState({ information: this.state.information.concat(data) }) } 리액트에서 배열이나 객체를 다룰 때 불변성을 지키는 것이 굉장히 중요하다. 예를 들어, shouldComponentUpdate에서 데이터가 업데이트되어야 하는 상황인지 판단할 때 불변성을 지킨 경우에는 다음 받아올 데이터가 현재 데이터와 다른지 확인하기만 하면 되지만, 불변성을 지키지 않고 기존 배열 push하는 식으로 데이터를 갱신하게 되면 다음 받아올 데이터 레퍼런스와 현재 데이터 레퍼런스가 가리키는 배열이 일치하므로 비교..

보호되어 있는 글입니다.

이 글은 https://velopert.com/3631 및 다른 자료들을 보며 공부한 것을 바탕으로 정리해놓은 글입니다. LifeCycle API는 컴포넌트가 브라우저 내에서 나타나고, 사라지고, 업데이트 될 때 호출되는 API이다. - constructor는 생성자 함수로, 컴포넌트가 처음 브라우저 상에서 나타나게 될 때 그 과정에서 가장 먼저 실행되는 함수로, 주로 컴포넌트가 갖고있는 state의 초기설정이나 사전작업 등을 거치게 된다. 컴포넌트가 새로 만들어질 때 마다 호출된다. - getDerivedStateFromProps는 주로 props로 받은 값을 state로 동기화시키고 싶을 때 사용한다. 위 그림에서처럼 Mounting 과정에서도 사용되고 Updating과정에서도 props가 바뀌면 실..

React component에서 다루는 data는 props와 state, 이 두 가지로 나뉩니다. props는 부모 component가 자식 component에게 주는 값입니다. 자식 component에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수 없습니다. 반면에 state는 component 내부에서 선언하며, 내부에서 값을 변경할 수 있습니다. +) props("properties"의 줄임말)와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에 차이가 있는 것입니다. props는 함수 매개변수처럼 component에 전달이 되는 반면, state는 함수 내에 선언된 변수처럼 compon..

1. 클래스 ES6에서는 자바나 파이썬 같은 객체지향 언어에서 쓰이는 클래스가 도입되었다. class Developer { constructor(name){ this.name = name; } hello(){ return 'Hello World! I am ' + this.name + ' and I am a web developer'; } } - class : 새로운 객체를 생성할 때 쓰이는 식별자 앞에 쓰인다. - constructor : 객체를 초기화할 때 쓰이는 메서드이다. 클래스 상속 class ReactDeveloper extends Developer { installReact(){ return 'installing React .. Done.'; } } var nathan = new ReactDe..