3주차
[수업 목표]
- event listener를 사용할 수 있다.
- React-router로 주소에 따라 다른 페이지를 보여줄 수 있다.
- 미리 정해놓은 주소가 아닐 때, '앗! 잘못 찾아오셨어요!' 페이지를 보여줄 수 있다.
- Redux로 상태관리를 해보고 아래의 상태관리 흐름을 이해한다.
(기본 값이 있고 → 어떤 동작을 하면("어떤 동작을 하는 지 정하자! → 하면 뭐가 바뀌는 지 정하자!" 과정이 사전에 필요하다!) → 값이 변했잖아? → 컴포넌트한테 알려주자!)- Redux hook을 사용해본다.
1강 - Event Listner
Event Listner 는 사용자가 어떤 행동을하는지 아닌지 지켜보다가 알려주는 것.
리액트에서 요소는 Ref로 잡는다. 후에 addEventListner를 추가한다.
Event listener를 추가해주는 것을 구독한다 라고 한다.
e.target > 이벤트가 발생한 요소가 무엇인지 가지고 오는 것
this.circle.current.addEventListener(1 - 어떤 이벤트, 2 - 어떤 행동을 할지)
this.circle.current.addEventListener("mouserover", this.hoverEvent) 마우스 오버시 hoverEvent 실행
2강 - 라우팅
라우팅 - 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 한다.
리액트는 SPA(Single Page Application)로 구성되어 있는데 이는 서버에서 주는 HTML이 1개 뿐인 어플리케이션을 말한다.
하나만 주는 이유 중 제일 중요한 것은 사용성 때문인데
페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적이다.
단점은 한 번만 정적자원(HTML, CSS, JS)를 받다보니 처음에 모든 컴포넌트를 받아오기 때문에 사용자가 사용하지 않을 페이지까지 전부 가지고 오고 이는 컴포넌트의 양에 따라 로딩 속도가 느려지게 된다.
4강 - 리액트에서 라우팅 처리하기
path가 "/"와 "/cat"이 있다고 했을 때
"/cat"으로 들어가게 되면 "/"에 있는 컴포넌트들도 화면에 불러와지게 되는데
이는 "/cat"에도 슬래쉬( / )가 포함되어 있기 때문이다.
이를 막기 위해 속성 exact를 사용한다. -> 정확한 입력이 필요해서 중복된 값으로 라우팅 되는 것을 막을 수 있다.
사용 예제)
<Route path="/cat/:cat_name" exact component={Cat}></Route>페이지 이동 방법
1 - Link
링크를 임포트하고, to 다음 가고싶은 url 작성
<Link to="/" exact>Home으로</Link>
<Link to="/cat/cat_name" exact>Cat으로</Link>
<Link to="/Dog">Dog으로</Link>2 - History
useHistory 훅을 사용한다.
import { useHistory } from "react-router-dom";
const Dog = (props) => {
const history = useHistory();
console.log(history);
return (
<div onClick={() => {
history.push("/Cat");
}}>
Dog화면 입니다!
</div>
);
};6강 - 잘못된 주소 처리
react-router-dom에서 제공해주는 Switch 를 사용
👇 자세한 설명
(https://baeharam.netlify.app/posts/react/why-switch-is-needed)
7강 - 리덕스(Redux)
전역 데이터 저장소로
하위 데이터에 데이터를 주려고 할 때 발생하는 props drilling을 막을 수 있다.전역 데이터 저장소에서 바로 원하는 곳에 데이터를 주는게 가능하게 해주기 때문이다.
흐름
구독한 컴포넌트들이 수정 요청 >> 액션(디스패치) >> 리듀서 >> 스토어 수정 >> 다시 구독한 컴포넌트에 값을 내려줌
8강
리덕스의 특징
- store는 1개만 쓴다
- state는 action으로만 변경을 할 수 있다.
- 이전 상태는 수정하지 않고 변화를 준 새로운 객체를 return 해야한다.
- 파라미터(인자)가 같으면 항상 같은 값을 리턴해야 한다.(순수한 함수)
10강 - 컴포넌트와 store 연결
컴포넌트에 만들어둔 store를 주입한다. 라고 표현.
index.js 에서 임포트해온다.
import {Provider} from "react-redux";
import store from "./redux/configStore"
BrowserRouter와 같이 App을<Provider>로 감싸준다.
11강 - 컴포넌트에서 리덕스 데이터를 사용하는 방법
리덕스 훅
useDispatch는 데이터를 업데이트할 때,
useSelector는 데이터를 가져올 때 사용.
import {useDispatch, useSelector} from "react-redux";
어떤 페이지를 만들 때의 순서?
뷰 - 라우터 - 기능
함수(function) (by. 드림코딩 엘리)
함수는 프로그램을 구성하는 기본적인 빌딩 블록
- 서브 프로그램이라고도 불리며 여러번 재사용이 가능하다는 장점이 있다.
- 한가지의 태스크나 어떤 값을 계산하기 위해 사용한다.
함수의 구조
function 이름(인자1, 인자2..) { 기능, return }
- 하나의 함수는 한 가지의 일만 하도록 만들어야 한다.
- 함수는 무언가를 동작하게 하는 것이기 때문에 동사형태로 이름을 지정
- JS에서 함수는 오브젝트로 간주되기 때문에 변수에 할당 할 수 있고, 파라미터(인자)로 전달이 되고, 다른 함수를 리턴 할 수 있다.
return
모든 함수엔 return이 들어가있는데 종종 없는 경우를 볼 수 있다.
이는 return undefined 이 들어가있는 것과 같고 이는 생략이 가능하다.
할당
익명 함수(anonymous function)를 할당
const print = function () { console.log(print) }함수 호출
print(); >> 로그에 printconst printAgain = print;
printAgain(); >> 로그에 print
Callback
어떤 상황이나 조건이 충족했을 때 호출되는 함수
화살표 함수 (Arrow function)
함수를 간결하게 만들어줌
항상 이름이 없는 익명함수
예제 1)
const simplePrint = function () {
console.log('simplePrint');
};
🔻🔻🔻🔻🔻🔻🔻🔻🔻
const simplePrint = () => console.log('simplePrint');예제 2)
const add = function (a, b) {
return a + b;
}
🔻🔻🔻🔻🔻🔻🔻🔻🔻
const add = (a, b) => a + b;중괄호
const A = () => {
return console.log('A 입니다')
}중괄호가 있는 경우 return문이 없다면 값이 반환되지 않는다.
오늘의 느낀점
-
컴퓨터는 실수를 안한다.
-
모든 실수는 내가 한다.
