STATE
state 언제 싸야함? 변동시 자동으로 html에 반영되게 하고 싶은면 사용
🐝 useState()
useState()는 array를 제공한다
배열의 첫번째 값은 초기값이고 두번째 요는 그 값을 바꾸는 함수
🐝 state를 세팅하는 2가지 방법
- 직접할당: setCounter(counter + 1)
- 함수를 할당: setCounter((current) => current + 1)
- 현재 state랑 관계없는 값을 새로운 state로 하고 싶은 경우에는 (1)
- 현재 state에 조금의 변화를 주어 새로운 state를 주고 싶은 경우에는 (2) 함수를 보낼 때 react.js는 함수의 첫번째 argument로 현재 state를 보내어 현재 state를 계산하거나 새로운 state를 만드는데 사용할 수 있게 된다
function App() {
const [counter, setCounter] = React.useState(0); //useState() 배열의 첫번째 값은 초기값이고 두번째 요소는 그 값을 바꾸는 함수
const onClick = () => {
setCounter((current) => current + 1); // setCounter(counter + 1); 와 같다 , 현재 state를 바탕으로 다음 state를 계산해내고 싶다면 current함수를 사용
};
return (
<div>
<h3>Total click:{counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}props
prop은 component에 보내지는 argument이다
즉, 부모컴포넌트로 부터 자식 컴포넌트에 데이터를 전송하는 방식이다
부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 객체가 들어가게 된다
props는 객체다
props.property는 그냥 {property}처럼 사용할 수 있다
Prop Types
리액트는 파라미터를 잘못넘겨도 확인할 수 없는 문제점이 존재한다
이런 문제를 줄이기 위해 propTypes라는 모듈의 도움을 받을 수 있다
type과 다르게 입력되었을 경우 warging을 뜨게 할 수 있고, prameter에 값을 넣지 않는 경우 경고 메시지를 띄울 수 있다
import PropTypes from 'prop-types';
함수명.propTypes = {
id: PropTypes.number.isRequired,
mediumCoverImage: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string),
};위의 예시처럼 prop:PropTypes.(숫자,문자,배열 등을 지정).(필수값지정)
속성에는 isRequired처럼 꼭 해당 인자를 받아야하는 경우 사용(없으면 에러를 띄어준다)
useEffect
함수가 여러번 호출되는 것을 막고 한번의 호출만 할 수 있도록 해준다
컴포넌트가 처음 rendering되었을 때를 포함하여 어느 특정 state에 변화가 있을 때만 실행할 코드에 사용
그 예로 한번만 호출해도 되는 API가 있다~!
useEffect(callback,[]) []빈 배열을 넣은 경우, 최초 1회 렌더링
useEffect(callback,[keyword]) [a,b] a나b 중 하나가 값이 변경될 때 렌더링
🔥 react momo()
부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링
react router
라우팅이란?🧐
사용자가 요청한 URL에 따라 해앋 URL에 맞는 페이지를 보여주는 것
URL및 특정한 HTTP요청메소드(GET,POST...)인 특정 엔드포인트에 대한 클라이언트 요청에 어플리케이션이 응답하는 방법을 결정한다
- 종류:가장 많이 사용하는 라우터 컴포넌트는
1.BrowserRouter:HTML5를 지원하는 브라우저의 주소를 감지
2.HashRouter:해시주소를 감지,뒤에 #을 붙인다(예를 들어 localhost:3001/#/movie)- 설치
npm install react-router-dom
라우터(브라우저 라우터)를 import한다
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
Router>Routes>Route 순으로 컴포넌트가 구성되어 있다
Router:path에 따라 랜더링해주는 역할Routes:한번에 하나의 Route만 렌더링 하기 위해서Route: 경로(=path)와 보여줄 컴포넌트(=element)를 명시한다
parameters
Routes의 path 뒤에 :변수명는 파라미터를 사용하기 위해 쓰이는 변수다
<Route path='/movie/:id' element={<Detail />} /> const { 변수명 } = useParams(); 로 파라미터를 import한다
fetch를 통해 받아온 URL에 변수를 같이 넣어 사용하면 원하는 URL을 정확히 가져올 수 있다
import { useParams } from 'react-router-dom';
const { id } = useParams();
const getMovie = async () => {
const json = await (
await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
).json();
console.log(json);
};<Link></Link>컴포넌트
HTML에서는 원래 링크를 만들 때 a태그를 사용한다. 하지만 a태그는 클릭시 페이지를 새로 불러오기 때문에 React에서는 Link를 사용
import { Link } from 'react-router-dom'; //Link컴포넌트사용
<Link to={`경로${변수명}`}>{링크명}</Link>Link컴포넌트에서 to={}안에 경로에 변수를 이용해서 브라우저 주소의 경로만 바꿔 보여주는 것이 가능하다
