react 기초문법

▶ react파일 만들기

cmd창에서 데스크탑으로 이동(cd desktop) 후 npx create-react-app '파일명' 입력

Happy hacking! 이라는 문구가 뜨면 완료

 

▶ 라이브서버 연결하는 법

터미널창에서 npm start 입력

 

▶ components

index.html에서 App.js 파일을 불러와서 로딩 되는 구조

App.js 파일 안에서도 각 레이아웃을 분리해서 js파일로 만들어 import 하여 불러올 수 있다

각 js파일은 컴포넌트함수를 통해 html값을 리턴해야 하고, 파일 하단에서 export 구문을 통해 내보내야 한다

 

▶ public폴더 안에 있는 파일을 선택할 때 사용하는 구문

process.env.PUBLIC_URL + public폴더 안에서의 파일 경로

 

▶ useState

state로 자주 변경되는 값을 관리할 수 있다(state값이 변경되면 해당 state값의 영향을 받는 모든 JSX가상DOM이 자동으로 재랜더링됨)

컴포넌트 함수 안쪽에서만 실행이 가능하다

import { useState } from 'react'; let [txt, setTxt] = useState(arr);

useState()함수 호출시 인수로 관리할 데이터값을 넣어서 실행하면 리턴값으로 배열을 반환한다.

첫번째 배열값 - state로 관리되는 값

두번째 배열값 - 해당 state를 변경할 수 있는 함수

state값은 무조건 state변경함수를 통해서만 변경 가능하다(재랜더링가능)

 

▶ useRef

가상돔을 선택해서 불러올 수 있다

import { useRef } from 'react'; const name = useRef(null);

초기값은 null로 지정하는 것이 일반적

 

▶ router

1. 리액트 라우터 모듈 설치(터미널창 이용)

npm install react-router-dom@5

2. index.JS에 라우터 모듈 import

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

3. index.js에 App컴포넌트를 브라우저 라우터 컴포넌트로 패키징

<BrowserRouter>      <App /> </BrowserRouter>

4. app.js에 필요한 기능 import

import {NavLink, Link, Route} from 'react-router-dom';

5.

<NavLink exact activeStyle={클릭시 변경할 스타일} to="클릭시 변경될 컴포넌트 경로"></NavLink> (a링크 대신 NavLink로 감싸주면 html파일로 변경될때 a링크가 자동으로 생성됨)

<Route exact path="변경될 주소" component={변경될 컴포넌트}></Route>