React : 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집
장점 : 빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조
React 구성요소 : 일반 JavaScript와 JSX로 구성
- node_modules 폴더 : 라이브러리 코드 보관함
- public 폴더 : static 파일 보관함
- src 폴더 : 코드 짜는 곳
- React JSX 코드주석 : {/* 내용*/}
- React 코드 주석 : //, /* 내용 */
JSX : .js파일에서 쓰는 html 대용품
- JSX 문법
1. class 넣을 땐 className
2. 데이터 바인딩(변수 넣는 것) => { } 중괄호
변수에 있던 자료를 html에 넣고 싶으면
3. style 넣을땐 style = { {스타일명 : '값'} }
- return() 안에는 병렬로 태그 2개 이상 기입 금지 (<div></div><div></div> X)
- useState('보관할 자료')
변수처럼 잠시 값을 넣어 놓는 것
ex) let [a,b] = useState('abcdefg');
a => state에 보관했던 자료 나옴
b => state 변경 도와주는 함수
- Destructuring 문법
ex) let [k, c] = [1, 2];
k = 1, c = 2
- 일반 변수를 쓰면 변수 값이 바뀔 때 자동으로 html에 반영 안됨
- state를 쓰던 html은 자동 재렌더링됨
- 변동시 자동으로 html에 반영되게 만들고 싶으면 state 씀
- state 변경방법 b -> state변경함수(새로운state)
- array/object 다룰 때 원본은 보존하는게 좋음 (copy본 하나 만들어서 사용)
ex) let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy);
ㄴ state 변경함수 특징 : b state와 copy state가 같다고 생각해서 변경 안해줌 (기존state == 신규state)
ㄴ array/object 담은 변수엔 화살표만 저장
ex) let arr = [1,2,3]; -> [1,2,3]이 어딨는지 알려주는 화살표만 들어있음.
ㄴ b가 새로운 state를 변경할때 기존 state 값과 동일하면 변경 안해줌.
ㄴ 변수1 & 변수2 화살표가 같으면 변수1 == 변수2 비교해도 true 나옴
- [...xxx]; -> 괄호 벗겨주세요
- /* eslint-disable */
Lint 끄는 기능(WARNING 메세지)
- 컴포넌트 문법 (한 단어로 축약 가능)
ex)
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세정보</p>
</div>
=>
function Modal(){ // Modal -> 컴포넌트
return(
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세정보</p>
</div>
)
}
- 컴포넌트 만드는법 (1)
1. function 만들기 (다른 function 밖에 만들기 & 이름은 첫 글자는 영어 대문자 사용)
2. return() 안에 html 담기
3. 쓰고 싶은 function 안에 <함수명></함수명> or <함수명/> 쓰기
주의) 한 function 안에 <div></div> 병렬으로 두 개 이상 못 씀
- 컴포넌트 만드는법 (2)
변수 하나 만들고 함수 만드는 것
ex) const Modal = () => {
return(
<div></div>
)
}
- 컴포넌트 만들어서 사용하는게 더 유용할 경우
1. 반복적인 html을 축약 할 경우 (함수/반복문)
2. 큰 페이지들
3. 자주변경되는 것들
- <></> : 의미없는 <div>대신 사용가능 (<div>들을 묶어줌)
- 동적인 UI 만들기
1. HTML CSS로 미리 디자인 완성
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성
- { }중괄호 안에 if문을 사용해야 할 경우 삼항연산자를 사용
- (!변수) : 변수를 반대로 설정
ex) (!true) => false
- 반복문으로 같은 html 반복생성
- array.map(콜백함수) (모든 array 뒤에 map 붙일 수 있음)
: map 안에 있는 함수안의 코드들을 array 갯수만큼 반복해서 실행시킴
- 함수 안 파라미터(a)는 array 안에 있던 자료
- 함수 안 파라미터(i)는 반복문 돌때 마다 0부터 1씩 증가하는 정수
- return 기입 시 array로 담아 줌
ex) [1,2,3].map(function(a, i){
console.log(a) // array가 2라서 1,2,3,1,2,3 실행
return '1233211' // [1233211,1233211,1233211]
})
- { }중괄호 안에 반복문을 사용해야 할 경우 map함수 사용
- 반복문 돌때마다 생성된 html은 유니크한 key={i} 속성 추가해야 리액트가 <div>들을 각각 구분할 수 있음
key={html마다 다른숫자} 추가
ex) [1,2,3].map(function(a, i){
return (
<div className="list" key={i}>
<h4 onClick={()=>{setModal(!modal)}}>{글제목[i]}</h4> // 글제목[i] or a 사용
<p>2024년 1월 1일</p>
</div>
)
})
- 일반 반복문 사용할 경우 (for문법은 JSX 안에서 사용 할 수 없어서 밖에서 사용해야 함.)
1. html들을 담아둘 array 자료를 만들어 줌
2. 일반 for 반복문을 이용해서 반복문 사용
3. 반복될 때 마다 array자료에 <div> 하나씩 추가
4. 원하는 곳에 {array자료} 사용
ex)
function App (){
var arr = [];
for(var i=0; i<3; i++){
arr.push(<div>안녕</div>)
}
return(
{arr}
)
}
- 함수 안에서 만든 변수는 그 함수 안에서만 사용 가능
- PROPS : 부모컴포넌트에서 자식컴포넌트로만 state 전송 가능 (props)
1. <자식컴포넌트 작명={state이름}/>
2. 자식 컴포넌트 안 파라미터에 props 등록 후 props.작명 사용
- <input type="range"/> type은 date, checkbox, text, range 등....
- <select>, <textarea> ....
- <input>에 뭔가 입력 시 코드 실행하고 싶은 경우 onChange/onInput
<input onChange={()=>{}}/> , <input onMouseOver={}>, <input onScroll={}>
- <input>에 입력한 값 가져오는 방법
함수 안에 파라미터 입력 (발생하는 이벤트에 관련한 여러 기능이 담겨있음)
ex) <input onChange={(e)=>{ console.log(e.target) }}/>
e.target : 이벤트 발생한 html 태그
e.target.value : 이벤트 발생한 html 태그에 입력한 값
- 이벤트 버블링 : 클릭이벤트는 상위 html로 퍼짐
- 상위 html로 퍼지는 이벤트버블링을 막고 싶으면 e.stopPropagation()
- <input> 태그에 입력된 값을 저장하고 싶을때 state에 넣어줌
ex)
let [입력값, 입력값변경] = useState('');
<input onChange={(e)=>{ 입력값변경(e.target.value) }}/>
- state 변경함수는 늦게 처리됨 -> 비동기처리
ex)
<input onChange={(e)=>{
입력값변경(e.target.value) -> 비동기 처리 2. 늦게 처리됨
console.log(입력값) -> 1. 먼저 실행되고
}}/>
- copy.splice(삭제 할 자리, 갯수); -> array 삭제
- copy.unshift(); -> array 추가
- 이미지 넣기
(1) .css 파일에서 직접적으로 넣어주기
ㄴ background-image: url('./image/main.jpg');
(2) .js 파일에서 import 한 후 사용하기
ㄴ import 작명 from '이미지 경로'
ㄴ style={{backgroundImage: 'url('+ 작명 +')'}
- 줄 바꿈 => white-space:pre-wrap / white-space: pre-line
- 리액트는 사이트 발행 전에 html js css 파일을 압축함 (bundling)
- public 폴더 안에 있는것은 압축 안됨
html에서 public 폴더 이미지 사용 할 땐 => /이미지경로
- https://create-react-app.dev/docs/using-the-public-folder/ 참고 (public 폴더 안 이미지 사용 시)
<img src={process.env.PUBLIC_URL + '/img/logo.png'} />
process.env.PUBLIC_URL => public 폴더 이미지 쓰는 권장방식
- 길고 복잡한 데이터들을 다른파일로 뺐다가 가져옴
- 다른 파일에 있던 변수 가져오는 방법
1. 다른 파일에서 변수를 export (컴포넌트도 export 가능)
export default 변수명 (한 개만 export 할 경우)
여러개 export 하고 싶을 경우 export { 변수1, 변수2 }
2. 기존 파일에서 import
import 작명 from '경로' (한 개만 import 할 경우)
여러개 import 하고 싶을 경우 import { 변수1, 변수2 } from '경로'
- array 자료형 / object 자료형
ex) let a = ['Kim', 20] => array 자료형
let b = { name : 'Lee', age : 30} => object 자료형 {자료이름 : 값} b.name 으로 사용
- 페이지 나누는 법
1. 컴포넌트 만들어서 상세페이지 내용 채움
2. /detail 접속하면 그 컴포넌트 보여줌
- 외부라이브러리 설치 react-router-dom
1. 터미널 - npm install react-router-dom@6 입력 설치
2. index.js 파일 연 후 <BrowserRouter> 추가
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
3. 기존 .js 파일에서 import { Routes, Route, Link } from 'react-router-dom'
4. <Routes> 만들고 그 안에 <Route>를 작성
5. <Route path="/url경로" element={<보여줄 html>} 작성
6. 페이지 이동 버튼
<Link to="/">홈<Link>
<Link to="/detail">상세<Link>
- 페이지 이동을 도와줌 : useNavigate()
- Nested Routes : 여러페이지 필요할 경우 (일부만 변경하여 보여 줄 경우)
<Route path="/about" element={<About/>}> -> Nested Routes
<Route path="member" element={<About/>}/> 장점 : Route 작성이 간단해짐, Nested Routes 접속시엔 element 2개나 보임
<Route path="location" element={<About/>}/>
</Route>
== 같음
<Route path="/about/member" element={<About/>}/>
<Route path="/about/location" element={<About/>}/>
<Outlet></Outlet> -> Nested Routes의 element 보여주는 곳