Web_Study/React_JS (6) 썸네일형 리스트형 Import, Export ▶ MoularizationReact는 프로그램을 구성하는 내부의 코드를 기능별로 나누어 Module형식으로 관리하는데 용이함한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있음재사용성이 증가함▶ import 할 때, {}의 차이모듈을 보내주는 export 방식의 차이모듈을 다른 파일에서 불러올 때, import 사용하듯, 모듈을 다른 파일로 보내려면 export라고 작성해야 함. Example.jsconst a = 1;const b = 2;export a;export default b;Sub.jsimport hi, {a} from './Example'; Example.js에서 export한 모듈을 불러오기 위해선, Sub.js에서 import로 불러와서 사용하면 됨.맨처음있는 hi는 default로 .. React Router ▶ React Router React에서 페이지 이동 처리(url 기준) npm install react-router-dom 사용법 import { BrowserRouter, Routes, Switch, Route } from 'react-router-dom'; import Home from "./routes/Home"; import Movie from "./routes/Movie"; function App(){ return 새로고침 뛸 Component } Browser Browser Router (보통의 웹사이트처럼 입력한 url로 표기) Hash Router (보통의 url에 추가적인 random값이 추가되어짐) Switch Route를 찾는 것 / 단 하나의 Route만 렌더링 하기 위함 Rout.. UseEffect ▶ useEffect (코드가 언제 실행될지를 정할 수 있음) import {useEffect} from 'react' function Hello(){ useEffect(()=>{ console.log('hi'); },[]) } function Hello2(){ function effectFn(){ console.log('hi2'); } useEffect(effectFn,[]); //같은 의미 return Hello } 2가지 argument 존재 우리가 실행시키고 싶은 함수 dependency 해당 dependency가 변화할때마다 우리가 실행시키고 싶은 함수를 실행한다는 의미 []비어있으면 코드가 한번만 실행된다는 것을 의미) ▶ Cleanup (uesEffect에서 실행하고 싶은 함수가 사라질 경우.. Props ▶ Props (재사용 가능 코드에 유용함) function Retext({Text}){ return( {Text} ) } //이렇게 사용 시, 하단 코드와 동일 /* hihi */ //응용 function Sitebox({ text, imgurl, url }) { // props 재사용가능용으로 만듬 return ( {text} ); } 재사용해야하는 코드가 많을 경우 매우 유용하게 사용가능 ReactJS_2:JSX_Syntax JSX Basic Syntax ● JSX는 html에서 사용하는 class 대신 className사용 hi ● 변수 외부 선언 후, JSX내부에서 {변수명}으로 불러오면 사용가능 let val='valueA'; return ( {val} ) ● return 안에는 2개의 div 병렬적으로 표현 X But, 의미없는 div태그를 줄이고 싶다면 로 묶어서 표현 가능 return( ) ● state 사용 import {useState} from 'react'; ● valA: state, setValA: state변경함수, useState('state의 초기값') let [valA,setValA] = useState('초기값'); ● State를 사용하는 이유 일반 변수는 html에 자동으로 변경 X -> 새로.. ReactJS_1:Install ▶ 개발환경 세팅 ▶ node.js 설치 npx creat-react-app my-app React작업할 파일내에서 터미널 사용 ▶ 기본파일들 라이브러리 모아놓는곳 static 파일 모아놓는곳(html, image파일 잠간 넣어둘때...) 코드 작업하는 곳 프로젝트정보(프로젝트명, version, 라이브러리 명들) src - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document... 이전 1 다음
