Practical Accumulation

1. 지금까지 live-server를 사용하여 react를 기동하였다. 1-1 webpack은 개발용으로 사용할 수 있는 다양한 기능을 가진 서버를 지원하고 있다. 1-2 이 서버를 사용하면 내부적으로 babel을 연결하여 컴파일하고 메모리를 활용하여 빠르게 재기동도 가능하다. 1-2-1 소스가 변경된 경우 변경 될 때 마다 bundle.js를 만드는 것이 아니라 메모리로 바로 로딩해버린다. 1-3 아래는 지난 포스트와 동일한 webpack.config.js파일이다. { "name": "react-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --watch", "serve": ..

1. 지금까지는 index.html파일에 script 테그로 CDN 링크를 사용하여 React를 사용하였다. 2. 보통 React 프로그램은 React를 내장으로 사용하므로 npm으로 React, React-dom 설치한다. 3. webpack은 npm으로 설치한 외장 라이브러리와 사용자가 작성한 코드를 하나의 파일로 만들어 준다. 3-1 webpack을 아래와 같이 설치한다. 3-2 srcipts 속성에 build라는 이름으로 webpack 명령어를 추가하면 다음과 같다. { "name": "react-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --watch", "serv..

1. live-server, babel 같은 범용적으로 많이 사용하는 라이브러리는 npm으로 설치 시에 global로 사용하면 편하다. 1-1 문제는 이런 실행형 프로그램들은 버전이 자주 바뀌고 이 프로그램이 실행하는 소스와 호환성 문제도 생기기 쉽다. 1-2 요즘에는 이런 호환성 문제로 global 설치는 권장하지 않고, 1회성 실행형의 경우 npx로 실행을 많이 하고 1-3 작성한 프로그램과 밀접하게 연관되어 계속 실행해야 하는 webpack, babel같은 프로그램은 내장형으로 설치한다. 1-4 예를 들면 지난 번까지 실행한 프로젝트의 package.json의 경우 모두 내장형으로 설치되었다. { "name": "react-basic", "version": "1.0.0", "description":..

1. 리액트 컴포넌트를 상속한 리액트 클래스는 리액트 컴포넌트의 라이프 사이클을 그대로 사용할 수 있게 된다. 1-1 라이프 사이클은 클래스가 생성되어 삭제될 때까지 리액트가 내부적으로 호출하는 컴포넌트의 메소드들이다. 1-2 가장 많이 사용되는 메소드는 componentDidMount, componentDidUpdate, componentWillUnmount 정도 이다. 1-3 3가지의 단계로 나눌 수 있는데 1-3-1 Mounting 1-3-1-1 constructor, getDerivedStateFromProps, render, componentDidMount 순서로 호출된다. 1-3-2 Updating 1-3-2-1 getDerivedStateFromProps, shouldComponentUpda..

1. 리액트는 리액트 컴포넌트를 상속하는 다기능의 리액트 클래스보다 함수로 정의된 단순한 컴포넌트도 지원한다. 1-1 함수로 컴포넌트를 정의할 경우 리액트 컴포넌트를 상속하지 않기 때문에 상태값이나 구현 메소드를 쓸 수 없다. 1-2 그 대신 단순한 함수를 실행하는 것이기 때문에 속도가 빠르다. 1-3 보통 상태를 가지지 않는 단순 데이터 표출용 컴포넌트를 만들 때 활용된다. 1-4 부모 컴포넌트에서 속성을 전달하면 함수 컴포넌트의 props 인자의 내부 속성값으로 전달이 된다. 1-5 아래 코드는 지난 포스트에서 상태가 필요한 TodoApp, AddTodo 컴포넌트를 제외한 나머지를 변경하였다. class TodoApp extends React.Component { constructor(props) {..

1. 리액트 클래스에는 render함수가 필수적으로 override되어야 한다. 1-1 리액트 클래스 없이 코드를 작성할 때는 별도의 render하는 함수를 만들어 상태가 바뀔 때마다 호출하였다. 1-2 이제 각 리액트 클래스마다 render함수가 존재하기 때문에 각 컴포넌트가 해주어야 하는 부분만 html로 구현한다. 1-3 문제는 리액트 클래스에서 상속으로 제공하는 render 메소드를 누가 호출해주는가 하는 문제가 남는다. 1-4 당연히 해당 컴포넌트의 내부 상태가 변경했을 때마다 호출해 주어야 하는데 이 상태정보를 별도로 관리해야 한다. 1-4-1 이를 위해 별도의 리액트는 특정 상태변수를 정의해야 동작하도록 설계되었다. state라는 맴버 변수이다. 1-5 이 맴버변수의 상태가 변함을 감지하기 ..

1. 직전에 포스트의 예제를 이어서 사용한다. 1-1 삭제버튼을 하나 추가하여 설명을 이어 간다. 2. 아래 코드를 보면 인스턴스 메소드나 인스턴스 변수로의 접근은 this, 로컬은 그냥 변수 이름으로 접근한다. 2-1 this의 여부는 아주 중요하다. 이벤트 등록 부분을 보면 this를 사용하여야 인스턴스 메소드로 접근이 가능하다. 2-2 이전에도 이야기 했듯 이벤트에 메소드를 등록하는 것은 메소드 호출이 아니고 메소드 자체의 할당이다. 2-2-1 사용자가 클릭한 시점에 해당 메소드가 호출되어야 함을 의미한다. 2-2-2 TodoList를 보면 Remove all이라는 버튼이 있다. 이 버튼의 click 등록시 해당함수 끝에 bind(this)가 있다. 2-2-2-1 이 부분은 이미 언급했듯 함수의 호..

1. 리액트는 자바스크립트 es6에 정의된 class를 사용하여 리액트 컴포넌트를 생성한다. 1-1 2~3년 전까지만 해도 대부분 이런 방식으로 작성되었지만 지금은 hook이 대세다. 하지만 아직도 중요하다. 1-2 리액트 클래스는 자바스크립트 클래스를 정의하면서 React의 기능을 사용하기 위해 상속을 사용한다. 1-2-1 React.Component라는 클래스를 상속하여 props를 포함한 다양한 라이프사이클 함수를 상속받는다. 1-2-1 필수적으로 override 해야 하는 함수가 하나 있는데 render() 이다. 1-3 아래 처럼 생성을 원하는 컴포넌트를 클래스로 정의한 후 리액트 컴포넌트를 상속하여 클래스를 만들어 간다. 1-4 가장 아래 줄에 어떤 컴포넌트가 최상위 컴포넌트인지를 지정하면 그..