생활코딩 : React

https://opentutorials.org/module/4058

React

https://github.com/Myoungmin/react-tutorial

GitHub - Myoungmin/react-tutorial: 생활코딩 React

 

 

React - 1. 수업소개

사용자 정의 태그를 Component라고 부른다.

 

Component를 작성하면 좋은점.

1. 가독성
2. 재사용성
3. 유지보수 편리

이 수업은 Component를 중심으로 현대적인 웹 애플리케이션 UI를 만드는 방법에 대해 알아본다.

 

React - 2. 공부 전략

React - 3. 개발환경의 종류

공식사이트에서 개발 환경 소개

Online Playgrounds

온라인상에서 리액트를 구현해볼 수 있다.

Add React to a Website

기존에 있는 웹사이트에 부분적으로 리액트를 추가하고 싶을 때
초급 사용자들에게 까다로울 수 있는 방법이다.

Create a New React App

toolchain : 리액트로 앱을 개발할 때 여러 도구들을 모아서 한번에 제공해주는 것

Recommended Toolchains에서 Create React App을 컴퓨터에 설치하여 사용할 것이다.
이 프로그램을 깔기위해서는 npm이 필요.

 

React - 4. npm을 이용해서 create react app 설치

Node.js 설치

npm install -g create-react-app

 

공식문서에는 npx를 통해 설치하라고 안내한다.
npm과 npx의 차이는 npm은 설치, npx는 임시로 설치하여 딱 한번 사용하고 지우는 것
용량을 절약하고 실행할 때마다 다운받아 최신상태를 유지할 수 있다는 장점이 있다.
이 수업에서는 npm으로 설치하여 사용한다.

 

React - 5. create react app을 이용해서 개발환경구축

React - 6. 샘플 웹앱 실행

React - 7. JS 코딩하는 법

id가 root인 태그 안에 리액트를 통해 만든 컴포넌트들이 들어간다.
코드 어디를 수정하면 되는지에 대해 소개하는 강의

 

React - 8. CSS 코딩하는 법

React - 9. 배포하는 법

빌드할 때는 npm run build를 터미널에서 입력하면
build라는 폴더 생성
불필요한 용량을 제거한 파일들이 생성된다.

 

React - 10. 리액트가 없다면

React - 11.1. 컴포넌트 만들기 1

순수한 html로 짠 코드를 리액트로 잘 정리정돈하는 작업을 한다.

header의 내용을 Subject라는 Component를 정의하여 태그로 생성하는 실습.
주의해야할 점은 Component를 만들 때 반드시 하나의 최상위 태그만 써야한다. 

 

React - 11.2. 컴포넌트 만들기 2

Component 이름에만 집중하게 하여 복잡도를 획기적으로 낮췄다.
Component를 만드는 패턴에 익숙해지자.

 

React - 12. props

태그 이름이라는 공통점과 프로퍼티라는 차이점으로 재사용성을 증가하여 유용하게 사용가능하다.

{this.props.title}
{this.props.sub}
이를 통해 완벽하게 동작하는 사용자 정의 태그를 만들 수 있게된다.

 

React - 13. React Developer Tools

크롬 확장프로그램 설치

 

React - 14. Component 파일로 분리하기

각각의 Component 별로 별도의 파일로 분리한다.
코드가 간결해지고 필요한 Component를 빨리 찾을 수 있고 App.js가 아닌 다른 React 파일에서도 파일로 분리한 Component들을 사용하여 빠르게 애플리케이션을 만들 수 있다.

//이 내용은 리액트를 사용하기 위해 항상 추가
import React, { Component } from ‘react’;

//TOC.js를 사용하는 쪽에서 아래의 코드에 의해서 TOC라는 클래스를 가져다가 사용할 수 있게된다.
export default TOC;

//사용하는 쪽에서 추가
import TOC from “./components/TOC”;

 

React - 15.1. State 소개

Props와 같이 살펴봐야하는 개념

Props는 Component를 사용하는 사용자의 입장에서 중요한 것

State는 Props 값에 따라 내부 구현에 필요한 데이터 

 

Component의 Props와 State는 철저하게 분리되어 있어야 한다.

 

React - 15.2. State 사용

어떠한 Component가 실행될 때 render()함수보다 먼저 실행되면서 초기화 시키는 생성자

 

constructor(props){
super(props);
this.state = {
subject:{titel:'WEB', sub:'World Wide Web!'}
}
}

 

<Subject title={this.state.subject.title} sub="world wide web!"}></Subject>

 

 

App이 내부적으로 사용할 상태는 state라는 형태를 통해 조작한다.
그리고 이렇게 만들어진 state 값을 Subject라는 Component의 props 값으로 넘겨줬다.
즉, 상위 Component인 App의 상태를 하위 Component인 Subject로 전달하고 싶을 때는 
상위 Component의 state 값을 하위 Component의 props로 전달한다.

 

React - 15.3. key

부모인 App의 입장에서는 state라는 내부정보를 사용하고, 그 정보를 자식에게 전달할 때는 props를 통해 전달한다.

그래서 App의 입장에서는 TOC가 어떻게 돌아가는지 알필요가 없다.

 

데이터가 바뀌었다고 TOC.js라는 파일의 로직을 수정할 필요가 없어진다.

 

여러개의 element을 자동으로 생성할 때, 각각의 리스트 항목들은 key라는 props를 가지고 있어야 한다.

 

key={data[i].id} 이런식으로 추가
이것은 우리가 만드는 애플리케이션에서 필요한 것이 아닌 리액트가 내부적으로 필요하여 요청하는 것이다.

 

React - 16.1. 이벤트 state props 그리고 render 함수

애플리케이션을 역동적으로 만들어 줄 이벤트에 대해 학습.

 

App의 state에 mode를 추가하고,

Render 함수에서 분기를 만들어 mode에 따라 Content의 props에 들어갈 데이터를 선택하는 로직 추가

Content의 props에 들어갈 데이터는 App의 state중 선택한다.

 

State에 알아야할 또 하나의 중요한 사실.

리액트에서 State 값이 바뀌면 그 State를 가지는 Component의 Render()함수가 다시 호출된다.

Render()함수가 다시 호출됨에 따라 하위의 Component의 Render()함수들도 호출된다.

 

React - 16.2. 이벤트 설치

이벤트 프로그래밍을 리액트에서 어떻게 구현하는가

html은 onclick 애트리뷰트에 넣지만
리액트는 완전히 똑같은 html이 아니라 리액트만의 규칙이있다.
리액트에서는 onClick을 사용해야한다.
리액트에서는 중괄호{}로 묶는다.

 

<a href="/" onClick={function(){
alert('hi');
}}>

 

<a href="/" onClick={function(e){
console.log(e);
debugger; //개발자도구 sources를 보여주면서 여기서 브라우저가 멈춘다.
}}>

 

//html의 태그들에 이벤트를 걸 때 태그가 갖고있는 기본적인 동작을 못하게 해야할 때가 있다
//그때 사용하는 구문
e.preventDefault();

 

 

React - 16.3. 이벤트에서 state 변경하기

16.1에서 세팅한 state와 16.2에서 설치한 이벤트를 서로 연결해준다.

 

이벤트함수 안에서 this.state.mode = ‘welcome’; 코드를 추가하면 에러가 발생한다.

 

이벤트가 호출되었을 때 실행되는 함수안에서는 this의 값이 component 자기 자신을 가리키지 않고, 아무값도 세팅되어 있지 않다.

 

그래서 TypeError: Cannot read property ‘state’ of undefined 에러가 발생한다.

 

해결방법은 함수가 끝난 직후에 function(e){...}.bind(this) 해준다.

 

그리고 위에서 처럼 설정하는 것이 아니라 아래와 같이 state를 설정해야 한다.

 

this.setState({
mode:'welcome'
});

 

2가지 조치가 필요하다.

1. bind
2. setState

 

React - 16.4. 이벤트 bind 함수 이해하기

var obj = {name:'egoing'};

function bindTest(){
console.log(this.name);
}

var bindTest2 = bindTest.bind(obj);

//이렇게 하면 최종적으로 egoing이 출력된다.
bindTest2();

 

React - 16.5. 이벤트 setState 함수 이해하기

이미 Component 생성이 끝난 다음에는 은닉되었기 때문에 setState 함수를 써야한다.
this.state.mode = ‘welcome’; 이런식은 리액트 몰래 수정하는 꼴이다.

 

React - 17.1. 컴포넌트 이벤트 만들기

이벤트 생산자가 되기위한 실습.

 

<Subject
…
onChangPage={function(){
this.setState({mode:'welcome'});
}.bind(this)}
>
</Subject>

 

 

Subject 컴포넌트 사용 부분

 

<a href="/" onClick={function(e){
e.preventDefault();
this.props.onChangPage();
}.bind(this)}>...</a>

 

정리

Subject라는 Component에 onChangePage라는 이벤트를 우리가 만들었다.
그리고 그 이벤트에 함수를 설치한다.
그 이벤트가 발생되었을 때 props로 전달된 onChangePage 연결된 이벤트핸들러 함수를 호출하면 된다.

 

React - 17.2. 컴포넌트 이벤트 만들기

제목을 클릭했을 때와 목록을 클릭했을 때 둘 다 모드가 바뀌도록 만드는 실습
Subject, TOC  태그 둘 다 onChangePage라는 이벤트를 만든다. 
TOC 태그에 onChangePage라는 이벤트 추가
최종적으로 Subject, TOC 태그가 링크가 클릭되어 onClick 이벤트가 발생했을 때,
props의 onChnagePage 이벤트가 발생하고,
연결한 이벤트 핸들러에 의하여 setState로 mode 값을 변경해주고 있다.

 

React - 17.3. 컴포넌트 이벤트 만들기

클릭한 컨텐츠가 본문에 표시되게 만드는 실습
속성을 이용하는 방식과 bind 메서드의 파라미터를 추가하여 function의 파라미터로 추가적으로 넘기는 방법 이렇게 2가지 소개하고 있다.

속성을 이용하는 방식
data-id={data[i].id} 이렇게 속성을 설정하고,
this.props.onChangePage(e.target.dataset.id); 파라미터로 넘긴다

파라미터 추가적으로 넘기는 방법
function(id, e){
…
}.bind(this, data[i].id)}

코드에는 속성을 이용하는 방식을 남긴다.

 

React - 18. 베이스 캠프

리액트를 통해 만든 지금까지 완성된 것을 보면, 

페이지가 바뀌지도 않는데 컨텐츠가 다이나믹하게 변경되는 것을 확인할 수 있다.

 

상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때는,

컴포넌트의 조작장치인 props를 통해 전달한다.

하지만 하위 컴포넌트가 상위 컴포넌트의 값을 바꾸고 싶다면,

props는 read-only라 바꾸지 못하고,

이벤트를 통해서 값을 바꾸게 된다.

이벤트를 구현한 것을 통해서, 그 이벤트가 발생했을 때 상위 컴포넌트의 state값을 setState() 메서드를 호출하는 것을 통해서, 상위 컴포넌트의 state를 바꿀 수 있다.

 

// 여기서부터는 리액트를 이용하여 동적으로 데이터를 추가, 수정, 삭제하는 방법을 알아볼 것이다.

// 추가, 수정 삭제 기능을 구현할 필요가 있을 경우 여기서부터 다시 듣기

 

React - 19.1. create 구현 : 소개

React - 19.2. create 구현 : mode 변경 기능

React - 19.3. create 구현 : mode 전환 기능

React - 19.4. create 구현 : form

React - 19.5. create 구현 : onSubmit 이벤트

React - 19.6. create 구현 : contents 변경

React - 19.7. create 구현 : shouldComponentUpdate

React - 19.8. create 구현 : immutable

React - 20.1. update 구현

React - 20.2. update 구현 : form

React - 20.3. update 구현 : state 변경

React - 21. delete 구현

 

React - 22. 수업을 마치며

immutable

구현을 단순하게 유지해서 더 높은 복잡성을 도전하기 위한 노력

객체를 immutable하게 다루기 위한 여러 라이브러리들 
immutable-js : 모든 연산이 원본을 변경하지 않고 복제된 값 수정, 
이런 도구를 사용하면 더욱 견고한 애플리케이션을 만드는데 도움이 된다.

router

우리의 웹 애플리케이션은 하나의 url로 모든 페이지를 다루고 있다.
페이지 전환을 할 때마다 네트워크 로딩을 하지 않는다는 점은 장점이다.
하지만 url만으로 페이지를 찾아올 수 없다는 것은 단점이다.

react-router : url에 따라서 적당한 컴포넌트가 실행되게 할 수 있다.
url로 접근하는 사용자에게 그 url에 해당하는 UI를 서비스할 수 있다.
리액트에 기본적인 기능이 아니고 플러그인 같은 기능이다.

npm run eject

감춰진 create-react-app의 기능을 수정할 수 있다.
한번 eject하면 다시 돌아갈 수 없다.

redux

리액트의 컴포넌트가 많아지면 컴포넌트간의 교류가 굉장히 까다로워진다.
redux는 중앙에 데이터 저장소를 만들어서 모든 컴포넌트는 중앙의 저장소와 직접 연결된다.
그리고 중앙 저장소 데이터가 변경되면 그것과 관련된 모든 컴포넌트가 영향을 받아 변화한다.

react server side rendering

서버쪽에서 웹페이지를 완성한 후에 클라이언트로 완성된 html을 전송하는 것으로 웹 애플리케이션을 구동할 수 있다.

react native

react 사용 방식으로 app을 만들 수 있다.