React 기초 (생활코딩)

seonja kim·2020년 4월 12일

리액트에 대해 전혀 모르고 있는 상태에서 생활코딩의 내용을 개인적으로 정리하였습니다.

리액트 유용성

리액트 컴포넌트

HTML 페이지는 head / body / footer뿐만 아니라
nevigation bar / side bar / main page 등 내부에도 많은 구성요소들이 있다.

그 각각의 nevi bar / side bar 등을 따로 파일을 만들어 저장할 경우
1. 가독성이 높아진다
2. 재사용할 수 있다.
3. 유지보수가 편하다.

유용한 앱

코드샌드박스 : 코드를 넣으면 오른쪽에 리액트 결과가 바로 나옴
create React App

명령어

npm run start : 리엑트 시작
npm run build : 용량을 줄이고 보안적, 심미적으로 좋지 않은 부분을 없애는 작업 - 실제 서비스를 제공할 때는 빌드 안에 있는 파일들을 사용하면 된다.

npm install -g serve
npm serve -s build : 빌드 다큐먼트를 루트로 하겠다. : 용량의 현격한 최적화

컴포넌트를 만드는 방법 (중요!)

class Subject extends Componenet {
	render()반드시 포함되어야 하는 함수 {
    return (
    여기 안에 내가 정리하고 싶은 내용을 넣는다
    주의점 : 하나의 최상위 태그로만 시작해야 함 ex) header / body/ div
    );
    }
}

사용법
ex)

class App extends Component {
	render() {
    return (
    	<div className="App">
  	    <Subject></Subject>
  	</div>
    )
    }
}

div태그 안에 위에 정의해둔 Subject내용이 들어가게 됨

class TOC extends Componenet {
	render() {
    return (
		<nav>
  		   <li></li>
   		   <li></li>
   		   <li></li>
  		</nav>
    );
    }
}

TOC라는 컴포넌트를 하나 더 만든 후에

class App extends Component {
	render() {
    return (
    	<div className="App">
  		<Subject></Subject>
  		<TOC></TOC>
  	</div>
    )
    }
}

컴포넌트의 첫번째 용법은 정리정돈!! 컴포넌트 만드는 패턴 확실히 내제화하기!

refactoring

class App extends Component {
	render() {
    return (
    	<header>
  	   <h1>{this.props.title}</h1>
        	{this.props.sub}
  	</header>
    )
    }
}

=> 사용자 정의 태그를 만든 것임! 넣어주는 값에 따라 변하는 기계를 만든 것임

class App extends Component {
	render() {
    return (
    	<div className="App">
  		<Subject title="WEB" sub="world wide web!"></Subject>
  		<Subject title="React" sub="For UI"></Subject>
 		<TOC></TOC>
 	</div>
    )
    }
}

일반적으로 사용할 때
import React, {Component} from 'react';
이걸 위에 넣어줘야 함

export default TOC;
이 문구를 마지막에 넣어줘야 TOC를 외부에서 사용할 수 있게 내보낼 수 있음

그렇게 하고 TOC를 사용할 파일에 내보낸 파일을 받기 위해
import TOC from "./components/TOC";
이걸 붙여줘야 함

State

props는 사용자에게 중요한 외부요인
props에 따라 내부에 state를 구현하는 요소가 철저하게 분리가 되어 있어야 함.

constructor(props) {
	super(props);
}

스테이트 값을 초기화하기 위한 코드

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

상위 콤포넌트의 state값을 하위 컴포넌트에 주는 방법이 아래 예시

class App extends Component {
	render() {
    return (
    	<div className="App">
  		<Subject title={this.state.subject.title} 
                     sub={this.state.subject.sub}></Subject>
  		<Subject title="React" sub="For UI"></Subject>
  		<TOC></TOC>
  		</div>
    )
    }
}

이렇게 파일들을 나누는 이유 : 외부에서 내부에 일어나는 상황을 모르는게 잘된 코드 : 전선과 같은 보기에 좋지 않은 것들은 다 안에 정리하는 것과 같은 원리

key 사용법 (복수의 앨리먼트)

class App extends Component {
	constructor(props) {
	super(props);
    this.state = {
    	subject:{title:'WEB', sub:'World Wide Web'},
        contents: [{
            {id:1, title:'HTML', desc:'HTML is for information},
            {id:2, title:'CSS', desc:'CSS is for design'},
            {id:3, title:'Javascript', desc:'Javascript is for interactive}
        }]
      }
    }
 }

import React, { Component } from 'react';

class TOC extends Component {
	render() {
    	var lists= [];
        var data = this.props.data;
        var i=0;
        while(i<data.length) {
        list.push(<li **key={data[i].id}**넣어줘야 에러가 나지 않음><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
        i = i+1;
        }
        return (
            <nav>
            	<ul>
                   {lists}
                </ul>
            </nav>
        )
    }
}