2021. 12. 17. 21:13ㆍTIL/웹퍼블리셔취업과정
▶ 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> |
'TIL > 웹퍼블리셔취업과정' 카테고리의 다른 글
리액트 비동기 서버통신 axios (0) | 2021.12.24 |
---|---|
깃허브에서 리액트 프로젝트 버전관리 및 배포방법 (0) | 2021.12.22 |
자바스크립트로 스크롤값 구할 때 (0) | 2021.11.25 |
자바스크립트로 css 스타일속성 가져오는 구문 (0) | 2021.11.24 |
객체지향 es5에서 es6로 변환 (0) | 2021.11.11 |