코딩하는 문과생

[서론] 리액트의 가장 큰 특징은 화면의 효율적인 렌더링을 위해 가상 DOM을 이용하며, 상태(State)라는 객체(Object)를 통해 컴포넌트를 제어한다는 점이다. 과거 동아리 교육 당시에는 State를 관리하기 위해 클래스 컴포넌트가 필수적이었고, this.setState를 이용해 상태를 제어할 수 밖에 없었지만, 한 화면 내 여러 상태의 관리의 필요성이 대두되면서 중앙저장소에 상태를 관리할 수 있게 하는 Redux가 나오게 되었다. Redux의 가장 큰 특징은 상태(State)에 각 컴포넌트의 직접 접근이 허용된다는 점이다. 그러나 클래스 컴포넌트는 여전히 상태관리를 하기에는 복잡도가 너무 높았고, 그에 따른 대안으로 함수형 컴포넌트에서 쉽게 상태를 관리하기 위해 훅(Hook)이 점차 주목받기 시..

[Life Cycle API] 컴포넌트가 브라우저 내 나타나고, 사라지고, 업데이트 될 때 호출되는 API [컴포넌트 초기 생성] Constructor constructor(props) { super(props); } ComponentDidMount 컴포넌트가 화면에 나타날 때 호출 1. 외부라이브러리 연동 2. 필요한 데이터를 요청하기 위해 axios, fetch 등을 통한 ajax요청 3. DOM의 속성을 읽거나 직접 변경하는 작업 componentDidMount() { } [컴포넌트 업데이트] shouldComponentUpdate 컴포넌트 최적화 작업에 사용 1. React는 DOM과 Virtual DOM간 비교를 통해 변화된 부분만 비동기적으로 리렌더링시킨다. 2. 변화가 없다는 것은 리렌더링된..

[props & state] props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값, 자식 컴포넌트는 받아오기만 하고, 수정불가 state: 컴포넌트 내부에 선언하고, 내부에서 값 수정가능 [Props] - MyName.js import React, {Component} from 'react'; class MyName extends Component { render(){ return( 안녕하세요! 제 이름은 {this.props.name} 입니다. {/* 자신이 받아온 props 값은 this. 키워드를 이용해 조회가능 */} ); } } export default MyName; -App.js import React, {Component} from 'react'; import './App.css' im..

프로젝트를 생성하고 프로젝트를 열어보면 아래와 같은 형태로 리액트 프로젝트가 구성되어 있다. 리액트가 유저인터페이스로 보여지는 방법은 App.js -> index.js -> index.html 파일 순으로 따라 가보면 리액트의 렌더링하는 방법을 알 수 있게 된다. [App.js] create-react-app 명령어를 통해 리액트 프로젝트를 구성하면 App.js에는 기본적으로 함수기반의 컴포넌트가 생성된다. 함수기반의 컴포넌트와 클래스기반 컴포넌트는 약간 차이가 있는데, 함수기반 컴포넌트 : 상태값 변경없이 props만 부모 컴포넌트로부터 받는 경우, 렌더링만 필요한 경우 클래스기반 컴포넌트 : 상태값 변경이 필요한 경우 로 나뉘어진다. 조금 더 쉽게 보기 위해 아래 함수기반 컴포넌트를 클래스기반 컴포넌..