리액트 주요 요소

JSX

HTML 과 비슷한 형식으로 스크립트 작성 가능
기존 HTML 형식과 비슷하지만 속성값등은 카멜 케이스 형식으로 사용해야 함
변수, 객체 등 참조하는 경우 { } 사용

 

 

CSS

import MyCSS from './My.css';


function App() {
	return (
        <div className={MyCSS.style}>
            .
            .
        </div>
    );
}

export default App;

 

 

컴포넌트

JSX내의 태그를 커스텀하게 생성
function, class 가능

const HelloWorld = function() {
	return <div><p>HelloWorld</p></div>
}

export default HelloWorld;

jsx 에서 <HelloWorld /> 와 같이 사용

 

component props

컴포넌트에 전달할 읽기전용 속성

const default function HelloWorld(props) {
    console.log(props)
    
    return (
        <div><p> { props.value } </p></div>
    );
}

props 는 오브젝트타입이며, 해당 컴포넌트에 전달될 속성들의 이름, 값으로 이루어져 있음.
jsx에서 <HelloWorld 속성명="값" /> 형태로 컴포넌트에 인자 전달.
props.속성명으로 각 속성에 접근가능하며, 단일 속성인 경우 js 구조분해할당과 같이 {인자} 로 설정해 바로 사용

export default function HelloWorld( {value} ) {

}

 

 

 

 

이벤트

버튼 이벤트

onClick = { () => {} }

속성에 함수를 직접 작성하거나 연결할 함수명 지정

<button onClick={
    () => {
        console.log("Clicked!!");
    }}
>

 

export default function MyComponent() {
    function buttonHandler() {
        console.log("Clicked!!!");
    }
    
    return (
        <div>
            <button onClick={buttonHandler}>Click</button>
        </div>
    );
}

함수명을 전달하는 경우에는 인자를 전달할 수 없으므로, 함수 직접 작성후 해당 함수내에서 원하는 함수를 호출.

 

텍스트 입력

onChange= { e => { }}

인자 1개를 받는 함수로 구성

<input type="text" onChange={showText} />


function showText(e) {
    console.log(e.target.value);
}

 

여러개의 input 을 하나의 핸들러 함수 사용하는 경우 e.target.name 으로 구분 가능

<input name="input1" onChange={ handler } />
<input name="input2" onChange={ handler } />

function handler(e) {
    console.log(e.target.name);
}

 

 

state

DOM 업데이트를 별도로 하지 않고 상태가 변경시 자동으로 다시 렌더링

기능추가
import { useState } from 'react';

정의
const [name, setter] = useState("default_value");

사용
<p> { name } </p>

 

 

데이터 반복 처리

// json 데이터
const str = '{
    "values": [
        { "id": "chance", "level" : 1},
        { "id": "user", "level": 10 }
    ]
}';

const json = JSON.parse(str);


// map
<ul>
    { json.values.map( item => (
        <li key={ item.id} > id : { item.id } </li>
    ))}
</ul>

 

 

페이지 이동

라우터를 이용해 path 별로 컴포넌트를 등록해 사용할 수 있다.

> npm install react-router-dom

 

각 path에 컴포넌트를 지정

Routes는 포함된 Route 중에서 일치하는 컴포넌트로 라우팅해준다.
루트 라우트는 path="/" 대신 index로 대체 가능

<BrowserRouter>
    <Routes>
        <Route path="/" element={<component/>}/>
        <Route path="/path" element={<component/>/>
        <Route path="*" element={<component/>/>
    </Routes>
</BrowserRouter>

 

 

중첩 라우팅

<Routes>
    <Route path="/root" element={<RootComponent/>}>
        <Route path="sub1" element={<SubComponent/>}/>
        <Route path="sub2" element={<SubComponent/>}/>
    </Route>
</Routes>

 

/root/sub1 과 같이 접근을 하게 되면,
RootComponent 가 표시되고, RootComponent 내부에서 Outlet으로 지정된 곳에 SubComponent 가 라우팅 된다.

<div>
    <h1>Main</h1>
    <Outlet />
</div>

 

useParams

path가 /sub 와 같이 고정된 형태가가 아닌 /sub/1, /sub/2 와 같이 동적 파라미터를 포함하고 있는 경우, 전달된 path의 파라미터 값을 얻기위해 useParams() 메쏘드 사용.

Route에는 파라미터값 전달을 위해 path를  /:parameter 형식으로 작성한다.

import { BrowserRouter, Route, Switch } from "react-router-dom";


function App() {
    return (
        <BrowserRouter>
           <Routes>
               <Route path="/" element={<RootComp />} />            
               <Route path="/sub/:id" element={<SubComp />} />
               <Route element={<DefaultComp />} />
           </Routes>
        </BrowserRouter>
    );
}

 

렌더링할 컴포넌트에서 파라미터 값을 얻어와 필요한 처리를 진행

import { useParams } from "react-router-dom";

export default function SubComp() {
    const {id} = useParams()
    
    return (
       <h1>sub page : {id}</h1>
    )
}

 

Link 컴포넌트를 통한 페이지 이동

<a href="/path"></a> 처럼 <Link to="/path"></Link>로 사용한다.

// 페이지 링크
import { Link } from "react-router-dom";

export default HelloWorld() {
   return (
       <li key={ item.id} >
           <Link to="/sub">Sub화면으로</Link>
       </li>
   );
}

 

useNavigate() 를 통한 페이지 이동

import { useNavigate } from 'react-router-dom';

export default HelloWorld() {
    const navigate = useNavigate();
    
    return (
        <button onClick={() => {
            navigate('/sub');
        }}>Sub화면으로</button>
    );
}

 

 

useEffect

렌더링이나 상태값이 변경되는 경우 호출
2번째 인자에 체크하고자 하는 상태를 넣어주면 해당 상태 변경시에만 호출됨

useEffect( () => {
    console.log("change");
}, []);

빈배열([]) : 컴포넌트가 화면에 가장 처음 렌더링 될 때 한번 실행
배열 생략 : 렌더링 될때마다 실행
[state] : state가 마운트, 변경 때 실행

 

 

TypeScript 적용

타입스크립트와 리액트 라이브러리들의 타입 라이브러리 설치
(create-react-app 으로 생성한 프로젝트의 경우 @types/jest 필요)

> npm install typescript @types/node @types/react @types/react-dom @types/react-router-dom  @types/jest

파일 확장자를 tsx 로 변경

 

props 타입 설정

컴포넌트의 속성 전달을 위한 props 도 타입이 정의되어야 한다.

interface IProps {
    data: IData;
}

interface IData {
    id: string;
    value: number;
}

export default function HelloWorld( { data: d }: IProps) {

}

 

params

useParams를 사용하기 위해 path의 파라미터도 타입을 지정해 주어야 한다.
제네릭으로 useParams 타입을 지정

import { useParams } from "react-router-dom";

export default function SubComp() {
    const {id} = useParams<{ id: string }>()
    
}

 

 

 

팝업

npm install react-modal

 

import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <>
            <button onclick={() => setIsOpen(true)}>Open</button>
            <Modal isOpen={isOpen} onReuquestClose={() => setIsOpen(false)}>
                대화상자
                <button onClick={() => setIsOpen(false)}>Close</button>
            </Modal>
        </>
    );
}