(React) 1 - 생활코딩(React) 1

■ 개발환경 세팅

 

---

 

1. 설치하기

   ● creat react app 설치하기

     1. npm install -g create-react-app

     2. 폴더 생성

     3. create-react-app [만들고자 하는 파일명] 

   ● npm run start

 

※ npm 이란?

: node.js 기술을 이용해 만들어진 앱들을 명령어 환경에서 설치를 쉽게 도와주는 로그이다.

프로그램을 설치하는 프로그램

 

※ npx 이란?

프로그램을 임시로 설치해서 딱 한 번만 실행하고 지운다.

컴퓨터 공간을 차지하지 않는다. 

실행할때마다 설치해서 항상 최신 상태이다. 

 

2. 배포하기

 

   ● npm run build

   ● npm serve -s build : 서브라는 웹서버를 받아서 build 를 document root로 하겠다.

      (build 한 용량 적은 웹페이지 열림)

 

※ npm install -g serve

: 컴퓨터 어디에서나 serve 명령어 어느것으로 서버 실행시킬 수 있음

 

■ 컴포넌트 제작

---

 

 

다음과 같이  react의 Component를 상속하여 새로운 Subject 클래스를 만들어 정의한다. 

 

- 최신 버전은 function 생략 가능

ex) function render() {} -> render() {}

- 컴포넌트는 하나의 최상위 태그만 사용해야 한다. 

ex) header

 

더불어 다음코드는 자바스크립트와 비슷하지만,

태그를 표시하는 부분을 그대로 사용해서 console 입력 시 오류가 뜬다. 

하려면 따옴표를 \ 사용해서 해야하는데 불편하다.

 

페이스북에서 이를 위해 jsx 언어를 만들었고 이 언어로 코드로 만들어

create-react-app이 알아서 javascript 코드로 컴버팅을 해준다. 

 

 

 

컴포넌트를 생성해주고 해당 태그를 사용해주면 간결하게 긴 코드를 짧게 나타낼 수 있다.

 

1. props 활용하기

 

 

 

react 에서 같은 태그의 내용을 다르게 표시하고 싶다면 props를 활용하면 된다.

이는 attribute 속성과 같은데 react에서는 props 라는 이름으로 불린다.

 

실제 활용방법은 내가 사용하고자 하는 목록(여기서는 Subject 2개) 적고,

각각 해당하는 제목과 sub를 달아준다. 

 

그리고 난 후 Subject를 정의했던 클래스로 돌아가

{ } 안에 this.props 를 하고 내가 부르고 싶은 것(title과 sub)을 지정해서 부른다.  

 

 

 

그러면 사진과 같이 title과 sub 가 다른 내용으로 두 번 출력된다. 

 

2. 컴포넌트의 분리

 

 

 

 각 컴포넌트를 다른곳에서도 사용할 수 있게 각각 js 파일로 분리해준다. 

우리가 기존에 만들었던 TOC 클래스를 TOC.js 파일을 생성해 거기에 넣어준다. 

 

Component 사용을 위해 상단에는 다음 코드를 입력해준다.

 

import React, {Component} from 'react';

 

 

여러가지 변수 및 함수를 외부에서 허용할 수 있게 설정해준다.

TOC.js를 가져다 쓰는 쪽에서 아래 코드를 통해 TOC 코드 사용이 가능해진다. 

 

  export default TOC;

 

 

 

 

그리고 TOC 코드를 사용하고자 하는 코드에 TOC를 import 해주고 경로를 설정해준다. 

해당 코드를 재사용할 수 있을 뿐 아니라 간결한 코드를 볼 수 있다. 

 

 

 

최종적으로 App.js 코드가 깔끔해진 것을 확인할 수 있다. 

 

■ State

---

 

1. State 란?

사용자가 사용하는조작하는 장치 = react의 props

내부적 구현을 위해서 다양한 매커니즘 = react의 state

 

즉, props는 사용자가 component를 사용하는 입장에서 중요한 것

state는 props값에 따라 내부의 구현에 필요한 데이터들

 

 Props와 컴포넌트를 실제로 구현하는 내부의 state가 철저히 구분돼 있어야 한다. 

그리고 state의 부분은 사용자가 알지 못하도록 감추어져 있어야 한다. 

 

 

 

Component가 실행될 때 render() 라는 함수보다 먼저 실행되면서

Component 를 초기화하고 싶다면 Constructor(props) 안에 초기화하고자 하는 Component 를 넣으면 된다.  

 

즉 Constructor(props) 가 초기화를 담당한다.

 

 

 

Component 내부적으로 사용할 상태는 state 라는 형태로 사용한다. 

우리는 subject의 값을 state화 시킬 예정으로 subject의 property(속성값)으로 다시 객체로 주는데

title: 'WEB', sub: 'World Wide Web' 으로 한다. 

 

하단에 Subject의 title을 상단의 이름을 state안에 subject를 쓰고 싶다면

자바스크립트 코드로 실행되기를 원한다면 {this.state.subject.title} 로 쓰면 된다. 

 

상위 컴포넌트의 app의 상태를 하위 컴포넌트로 주고 싶을때는 

상위 컴포넌트의  state의 값을 하위 컴포넌트의 props의 값으로 전달하는 것은 얼마든지 가능하다. 

 

3. key

 

 

TOC의 있는 목록을 자동으로 생성하고자 한다. 

State안에 content를 만들고 이를 배열로 각각 값을 넣어준다. 

 

하단에는 data를 프록시로 줘서 상단 컴포넌트 값을 주입해준다. 

 

 

받아온 props값을 data 변수에 할당하고,

그 길이만큼 반복문을 돌린다. 돌린값은 list 배열안에 list.push를 통해 넣어준다. 

 

 

리액트에서는 key값을 각 props마다 넣어줘야 하기 때문에 넣어주고,

경로와 타이틀의 경우에도 data[i]의 불러올 값을 통해 적절하게 넣어준다.

 

 

 

하단에는 이렇게 push 로 넣은 list 배열을 불러오면 자동으로 목록이 형성된다. 

 

■ 이벤트

---

 

1. render 함수

 

react에서는 state값이 변경되면 state를 가지고 있는 component에 있는 render 함수가 다시 호출되고,

render함수 하위에 있는 component들의 render함수도 다시 호출돼서 화면이 다시 그려지게 된다.

 

render함수의 역할을 어떤 html을 그릴 것인가를 결정하는 함수이다. 

 

2. state 변경하기

 

onClick 함수를 통해 클릭시 이벤트를 설정할 수 있다. 

다만 a태그는 기본적으로 페이지를 이동하는 효과가 있다.

따라서 화면이 한 번 깜빡이게 된다.

 

이를 위해 e.preventDefault() 를 사용하면 화면 이동 없이 클릭 효과를 줄 수 있다. 

e.preventDefault() : 기본적인 동작 방법을 막는다.

 

 

 

다음과 같이 넣으면 state undifined 에러가 뜬다. 

이벤트가 호출되는 함수 안에서는 this가 컴포넌트 자기 자신을 가르키는 것이 아니라 아무값도 담지 않기 때문이다. 

그럴 경우에는 함수가 끝난 직후에 bind(this)를 넣어주면 된다.

 

그러면 this가 컴포넌트가 되게 된다. 

 

그러나 react에서는 다음과 같이 state를 바꿀 수 없다. 

 

 

 

 

this.setState 를 통해 내가 바꾸고자 하는 것을 바꿔주면

정상적으로 클릭 시 하단 값이 welcome 에 맞는 제목과 sub가 나오게 된다. 

 

3. bind 함수

 

bind : 엮는다. 묶어준다.

 

 

bind 함수를 쓰면 bind() 안에 있는 값을 this 로 가지게 된다.

따라서 이것을 bindTest2라는 함수로 정의하고 그 함수를 부르게 되면 this.name은 obj의 egoing을 부르게 된다. 

 

 

 

따라서 다음과 같이 bind(this)를 사용하게 되면 app이라는 컴포넌트를

해당 함수에 주입해서 그 객체가 되도록 하는 것이다.

 

4. setState 함수

 

 

state의 값이 바뀌면 setState 로 바꿔야 한다. 

 

 

constructor는 안에서 상관 없이 값 변경해도 된다. 

 

5. 컴포넌트 이벤트 만들기

 

 

알람창이 뜨는 onChangePage 이벤트를 넣어준다. 

 

 

클릭을 했을 시 동작할 이벤트를 넣어준다.

a 태그의 기본 페이지 이동을 막아주는 e.preventDefault() 를 넣고,

this.props.onChangePage() 를 호출해준다.

bind(this)를 통해 Subject 컴포넌트임을 인식시켜 준다. 

 

그러면 알람이 정상적으로 뜨게 된다. 

 

 

이제 이곳에 우리의 원래 목적인 setState 함수를 통해 클릭 시 mode가 welcome 으로 바뀌게 세팅해준다. 

 

 

 

각 목록 클릭 시 해당하는 문구가 나오게 설정해줄 것이다.

우선 마찬가지로 TOC도 onChangePage 함수를 설정해주고,

this.setState를 통해 mode를 'read' 로 바꿔준다.

function에서의 bind를 통해 this가 toc를 가리키는 것을 인식시켜 준다. 

 

 

 

이벤트는 target이라는 속성이 있는데 타겟은 이벤트가 발생한 태그 즉 a 태그를 나타낸다.

e.target 을 하면 이벤트가 발생한 태그 = a태그를 가리킨다.

그러면 우리는 a태그가 가지고 있는 data-id 값에 접근할 수 있다. 

 

 

dataset 부분에 해당 내용이 들어가 있고 id 값 확인 가능하다.

 

 

해당 부분을 함수를 호출하는 인자로 넣어준다. 

 

 

onChangePage 에 id 값 1 넘어온 것을 확인 가능하다. 

 

 

해당 값을 받아온  id 값으로 해준다.

 

 

그러나 문구는 뜨지 않는데 그 이유는 contents 는 숫자인데 

selected_content_id 는 문자이다. 

 

 

따라서 Number 처리를 통해 숫자 형태로 변경해준다.

 

 

그러면 클릭시마다 해당하는 제목고 문구로 바뀐다. 

 

 

TOC.js 에서도 밑줄 부분만 일치하면 된다. 

 

 

 

또다른 방법으로는 bind 안에 매개변수를 넣어주는 것이다.

bind 안에 매개변수를 넣어주면 data[i].id 는 id 에 들어가고 e 는 한 칸 밀린다.

 

여기서 예시로 추가로 10을 넣는다면 e 는 한칸 더 밀려서

id, num, e 순서로 배치된다.