React #5 create-react-app

react 프로젝트를 생성해봅시다.

콘솔창에 npx create-react-app 을 입력하거나 편집기의 기능을 사용하면 됩니다.

create-react-app.dev/docs/getting-started

Getting Started | Create React App

참고로 이 방식으로 설치하게 되면 yarn 프로젝트 매니저가 함께 설치됩니다.

yarn은 페이스북에서 npm처럼 사용할려고 만든 의존성 관리 프로젝트 매니저인데

npm의 단점인 패키지 설치 속도와 보안성을 개선할려고 만든 도구입니다.

둘 중 뭐가 더 좋다기보다는 둘 다 장단점이 있습니다.

 

사용법은 npm과 비슷합니다.

npm install -g yarn yarn start

 

프로젝트를 생성 완료했다면 아래와 같은 구조가 생성됩니다.

간단하게 추가된 파일을 설명하자면

manifest.json : 앱에 대한 기본 정보를 담은 파일입니다. 배경색, 앱의 이름, 홈스크린 아이콘등의 정보를 저장합니다.

index.js : 해당 프로젝트의 진입점입니다. 여기에 render 코드를 작성하게 됩니다.

App.css, Index.css : css파일이 함께 생성되었습니다.

 

프로젝트이름.iml : node.js의 설정파일입니다.

yarn.lock : yarn의 설정파일입니다.

reportWebVitals.js : 리액트랑 관련은 없고, 웹 페이지의 상태와 로그를 확인하는 라이브러리입니다.

참고로 이전 리액트버전에서는 serviceWorker.js 라고 불렸습니다.

 setupTests.js : 리액트 테스트 코드 작성용. 나중에 프로젝트 테스트 코드를 작성할 때 배우게 됩니다.

 

#1 컴포넌트 생성

프로젝트 src 폴더안에 components 폴더를 만들고 하나씩 추가해봅시다.

참고로 hot-loader 플러그인도 함께 설치되었다면 프로젝트를 재시작하지 않아도 자동으로 수정본이 반영됩니다.

// index.js , 기본 생성된 파일입니다. 프로젝트의 시작지점

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App';
import reportWebVitals from './reportWebVitals';

// React.StrictMdoe 객체는 앱 내의 잠재적인 문제를 잡는 도구입니다.
// 컴포넌트의 생명주기, 안정성, 권장되지않는 사용법등을 점검하는 도구이며 
// 삭제하셔도 상관은 없습니다. 물론 index.js 말고 다른 곳에도 사용 할 수 있구요.
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);Q


// 로그를 남기는 메서드입니다. 필요없다면 지워도 됩니다.
// Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

// src/Components/App.js

import React from "react";
import Contact from "./Contact";

export default class App extends React.Component{
    render() {
        return(
            <div>
                <h1> Hello </h1>
                <Contact/>
            </div>
        )
    }
}

// src/Components/ContactInfo.js

import React from "react";

// export default문을 이렇게 클래스 선언 앞에 작성해도 됩니다.
export default class ContactInfo extends React.Component{
    render() {
        return(
            <div>
                {this.props.contact.name}
                {this.props.contact.phone}
            </div>
        )
    }
}

import React from "react";
import ContactInfo from "./ContactInfo";

export default class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            // 데이터를 [객체, 객체...] 형태로 state에 등록하였습니다.
            contactData:[
                {name:'Jiwo1',phone:'010-9999-9991'},
                {name:'Jiwo2',phone:'010-9999-9992'},
                {name:'Jiwo3',phone:'010-9999-9993'},
                {name:'Jiwo4',phone:'010-9999-9994'},
            ]
        }
    }

    render() {
        // const mapToComponent = (contactData) => {
        //     return contactData.map((contac,index) => {
        //         return (<ContactInfo contact={contac} key={index}/>)
        //     })
        // };
        const mapToComponent = (data) =>
            data.map( (contact, i) =>
                <ContactInfo contact={contact} key={i}/>
                )

        return (
            <div>
                {/* 위에서 만든 메서드를 이용하여 컴포넌트 생성.*/}
                {mapToComponent(this.state.contactData)}
            </div>
        )
    }
}

 

#2. Contact 컴포넌트 수정

해당 코드에서는 *더보기 JS 의 Sort와 Filter를 사용합니다.

arr.sort( [compareFunction] )
해당 배열을 유니코드 기준 오름차순 (또는 주어진 비교함수)로 정렬합니다.
입력한 배열 순서 자체를 바꿉니다.

var name = [ 'la', 'ql' , 'qkw' ]

name.sort()

var name = [ 'la', 'ql' , 'qkw' ]
name.sort()

 

arr.filter( callback )

arr.filter( (요소, 인덱스, 배열) )

해당 배열에서 callback 함수를 적용 했을 때 true를 반환하는 요소만 남겨 새로운 배열을 만듭니다.

기존의 배열을 수정하지 않습니다.

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
var arr2 = arr.filter(function (n) {
    return n % 5 == 0;
});
console.log(arr2); // [15, 395, 400, 3000]

Contact 컴포넌트를 수정해서 검색창과 그 검색창의 정보를 저장할 로컬 state를 만들어 줍시다.

실행화면

import React from "react";
import ContactInfo from "./ContactInfo";

export default class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyword: '', // 검색 키워드를 저장할 state를 만들었습니다.
            // 데이터를 [객체, 객체...] 형태로 state에 등록하였습니다.
            contactData: [
                {name: 'Jiwo1', phone: '010-9999-9991'},
                {name: 'Jiwo2', phone: '010-9999-9992'},
                {name: 'Jiwo3', phone: '010-9999-9993'},
                {name: 'Jiwo4', phone: '010-9999-9994'},
            ]
        }
        // 이벤트 핸들러 내에서 this 키워드를 사용하기 위해 바인드 해주었습니다.
        this.handleChange = this.handleChange.bind(this);
    }

// 이벤트 핸들러 메서드를 추가했습니다. 입력값을 실시간으로 state에 저장합니다.
    handleChange(e) {
        this.setState({
            keyword: e.target.value
        })
    }

    render() {
        const mapToComponent = (data) =>
            data.map((contact, i) =>
                <ContactInfo contact={contact} key={i}/>
            )

        return (
            <div>
                <h1>Contacts</h1>
                <input type="text" name="keyword" placeholder="Search"
                       value={this.state.keyword} onChange={this.handleChange}/>

                {/* 위에서 만든 메서드를 이용하여 컴포넌트 생성.*/}
                {mapToComponent(this.state.contactData)}
            </div>
        )
    }
}

그리고 mapToComponent 메서드를 수정하여 이름 검색기능을 추가해봅시다.

const mapToComponent = (data) =>
            data.filter((contact)=>contact.name.toLowerCase().includes(this.state.keyword.toLowerCase()))
                .map((contact, i) => <ContactInfo contact={contact} key={i}/>
            )