[DAY - 66] React 설치, 기초, 예제

• React 설치
• React 기초
• React 예제

 

1) React 설치

1-1) Node.js 설치

https://nodejs.org/en

Node.js

* 안정성 때문에 current 버전이 아닌 LTS 버전을 받고 설치했다.

 

1-2) yarn 설치

 js 패키지 관리를 위한 yarn 설치해 준다.

https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

 

1-3) VScode 확장 Reactjs code snippets

코드 자동완성 사용을 위해 VScode 확장 Reactjs code snippets 추가해 준다.

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets 

Reactjs code snippets - Visual Studio Marketplace

 

1-4) React 프로젝트 생성

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

Getting Started | Create React App

 

cmd 혹은 VScode 터미널을 이용해 프로젝트를 생성해 준다.

폴더 생성(create) - 폴더 진입(cd) - 프로젝트 생성(start)

 

React 프로젝트

 

몇 분 정도 기다리면 위와 같은 폴더와 파일들이 생성된다. (build폴더 제외)

 

2) React 기초

import React from 'react';

const Abc = () => {
    return (
        <div>
            컴포넌트
        </div>
    );
};

export default Abc;

• 파일 확장자는 js, jsx
• 파일명 첫 글자는 대문자
• 컴포넌트 : 재사용 가능한 UI의 조각, 함수구조를 가진 함수형 컴포넌트
• return 안에 작성한는 구조는 JSX
• 연산자는 &&, ||, ? 사용 가능
• 반복문으로 forEach 대신 map 사용
• js식 변수와 식은 { } 중괄호 블록 안에 작성
• '문자' + 변수 (X)
• `문자 ${변수}` (O)

 

3) React 기본 예제

 

3-1) 변수 사용 및 css 적용

import React from 'react';

const Test2 = () => {
    let title = '신상명세서'
    const name = '김'
    const age = 20
    const arr = '서울특별시 광진구'
    const tel = '010-7777-4511'


    const css1 = {
        fontSize: 30,
        width: 300,
        lineHeight: '50px',
        backgroundColor: 'tan'
    }
    const css2 = {
        fontWeight: 700,
        width: 500,
        color: 'blue',
        borderBottom: '3px solid #000',
        paddingBottom: 20
    }

    return (
        <>
            <h2 style={css1}>{title}</h2>
            <h3 style={css2}>수식, 변수 &#123; &#125; 중괄호</h3>
            <ul>
                <li style={{ color: 'green', fontSize: 40 }}>이름 : {name}</li>
                <li>나이 : {age}</li>
                <li>주소 : {arr}</li>
                <li>연락처 : {tel}</li>
            </ul>

        </>
    );
};

export default Test2;

예제1

 

변수를 불러올 때 { }를 사용하고 css는 변수에 저장한 뒤 태그에 직접 적용시킨다.

 

 

3-2) SCSS 적용

import React from 'react';
import './Test4.scss';

const Test4 = () => {
    return (
        <>
            <div className="con-box">
                <article className="box red">red</article>
                <article className="box green">green</article>
                <article className="box blue">blue</article>
                <article className="box black">black</article>
            </div>
        </>
    );
};

export default Test4;

.con-box {
    width: 500px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .box {
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 20px;
        text-align: center;
        color: white;
        border-radius: 30%;

        &.red {
            background: red;
            &:hover {
                opacity: 0.5;
            }
        }
        &.green {
            background: green;
            &:hover {
                opacity: 0.5;
            }
        }
        &.blue {
            background: blue;
            &:hover {
                opacity: 0.5;
            }
        }
        &.black {
            background: black;
            transition: 0.3s;
            &:hover {
                opacity: 0.5;
                transform: rotate(360deg);
            }
        }
    }
}

class는 예약어로 인식을 하기 때문에 className을 사용한다.

Test4.scss 파일에 css 내용을 넣어 주었다.

 

 

3-3) 연산자

import React from 'react';

const Test5 = () => {
    const x = true;
    const y = false;
    const z = undefined;
    return (
        <div>
            <p>
                {x===true ? <button>확인</button> : <button>취소</button>}
            </p>
            <p>
                {x && <span>true 결과</span>}
            </p>
            <p>
                {y || <span>false 결과</span>}
            </p>
            <p>
                {z || <b>undefined</b>}
            </p>
        </div>
    );
};

export default Test5;

 

3-4) props

import React from 'react';

const Sub = (props) => {
    return (
        <div>
            <h2>이름 : {props.name}, {typeof props.name}</h2>
            <h2>나이 : {props.age}, {typeof props.age}</h2>
        </div>
    )
}

const Test7 = () => {
    const dog = { name: '강아지', age: 2 }
    const cat = { name: '고양이', age: 4 }
    return (
        <div>
            <Sub name="김" age="20" />
            <hr/>
            <Sub name="이" age={30} />
            <hr/>
            <Sub name={dog.name} age={dog.age}/>
            <hr/>
            <Sub name={cat.name} age={cat.age} />
            <hr/>
            <Sub {...dog}/>
            <Sub {...cat}/>
        </div>
    );
};

export default Test7;

 

props

 

props는 상위 컴프턴트가 하위 컴포넌트에 값을 전달할 때 사용한다.

 

 

3-5) key

const Test9 = () => {
    const arr = ['김', '이', '박', '최', '윤']
    const data = [
        { id: 1, name: '김' },
        { id: 2, name: '이' },
        { id: 3, name: '박' },
        { id: 4, name: '최' },
        { id: 5, name: '윤' }
    ]
    return (
        <div>
            <h2>반복문 map + key</h2>
            <ul>
                {
                    arr.map((item, idx) => {
                        return (
                            <li key={idx}>
                                {idx}/{item}
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            <ul>
                {arr.map((item, idx) => <li key={idx}>
                    {idx}/{item}
                </li>)}
            </ul>
            <hr />
            <ul>
                {
                    data.map((item, idx) => {
                        return (<li key={idx}>{idx}/{item.id}/{item.name}</li>)
                    })
                }
            </ul>
            <hr />
            <ul>
                {
                    data.map((item, idx) => {
                        const { id, name } = item
                        return (<li key={idx}>{idx}/{id}/{name}</li>)
                    })
                }
            </ul>
            <hr />
            <ul>
                {
                    data.map((item,idx)=> <li key={idx}>{item.id}/{item.name}</li>)
                }
            </ul>
        </div>
    );
};

export default Test9;

 

key

React에서 map을 사용해 배열을 랜더링 할 때 변경이 필요하지 않은 리스트의 요소까지 영향이 끼치게 된다.

이를 방지하기 위해 위 예제처럼 idx(인덱스) 번호를 key로 사용한다.