0. 리액트를 시작하면서 배우고 있는 것들 01
컴포넌트 - 레고 조각과 같은것
라이프사이클 - 컴포넌트가 우리눈에 보이게 된 순간부터 사라진 순간까지의 주기
가상돔 - 진짜 돔은 그대로 두고, 메모리에 눈에 보이지 않는 가상돔에 필요한 컴포넌트를 다 구축해놓은 뒤 진짜돔과 비교해서 다른부분을 마지막에 딱 한번에 다 채워주는 역할
Props -부모컴포 가 자식 컴포에게 주는 데이터
State - 내가 가진 컴포
componentDIdMount 에서 addevent 나 AJAX 같은 진짜 돔에서 일어나는 걸 보통 이 안에 넣는다. (DidUpdate에서도 가능. 왜냐면 우선 다 끝난 상태이기 때문에)
Render 는 반드시 있어야 한다 (리턴되는값이 하나는 있어야하기 때문에)
//특정 파라미터 값을 넣어서 특정 코드식을 해석한 답을 원할때
화살표함수에서 {}를 쓸때는 반드시 안에 return 이 있어야함.return 이 들어있는 {} 를 줄여서 ()로 씀.
가상돔의 데이터와 진짜 돔의 데이터를 비교할때 사용되는 key 값의 경우, map을 돌리면 모든 항목에 개별로 key 값을 넣을 수없으므로 map.((n, i인덱스) => {} 처럼 인자에 인덱스 값을 설정한 후 {}안에서 key={i} 로 키값을 인덱스에서 가져온다
onClick = {this.함수명} 을 쓸때 함수명 뒤에() 붙어있으면 즉시 실행되기때문에 반드시 빼준다
기본 flex 배열은 row(가로)로 되어있고, flex-direction: column(세로) 로 스타일을 주면 세로로 변경
코드볼때 렌더쪽을 먼저 보는게 좋다. 뷰를 먼저보는 의도도 있고, 어떤 변수들이 있는지 먼저 파악
컴포넌트가 사라졌을때는 이벤트리스너도 같이 사라져줘야한다. 그게 아니면 컴포넌트가 사라졌다 다시 나타날때 이벤트리스너가 계속 반복 됨.
이벤트리스너는 클릭을하던 마우스를 올리던 돔요소가 있어야 이벤트가 발생될 수 있기때문에, 컴포넌트 디드마운트 역할을 하는 곳에 이벤트 리스너가 있어야함. 한마디로, 뭐가됐든 마운트된 돔요소가 있어야 거기서 이벤트리스너가 발생할 대상이 있는것.
useEffect 훅은 첫번째 인자가 화살표 함수, 두번째 인자가 디펜던시 어레이 모양은 useEffect(() => {} ,[])
최초 렌더링 시, 첫번째 인자는 무조건 실행 / 리렌더링 시에는 디펜던시 어레이에 있는 요소들의 변화를 확인한 후, 변화가 있으면 첫번째 인자(화살표함수)가 실행됨.(업데이트역할) 디펜던시 어레이 내부에 아무런 요소도 없다면 그냥 디드마운트 처럼 그대로임.
그리고, 컴포넌트가 화면에서 사라질때 동작하는것들을 return에 넣는다
멀티페이지어플리케이션(MPA) 기존의 페이지별 html을 서버에서 내려주는것
리액트는 SPA
Index.js에서 최상위컴포넌트(app)를 브라우저라우터컴포넌트로 감싸준다 -> 최상위컴포넌트 안의 모든 컴포넌트가 포함됨
Route 할때, path가 특히 ‘/‘ 로 메인페이지를 쓸 경우에는 뒤에 exact를 붙여준다 -> exact 는 ‘정확히 ‘/‘ 여기 일때 만’ 을 의미하고 exact가 없을때에는 ‘ ‘/‘ 여기를 포함할때 모두’ 라고 이해한다.
Url 주소에는 파라미터와 쿼리가 있다.
파라미터는 /aaa/bbb 의 형식
쿼리는 /aaa?name=bbb& 의 형식으로 ?key값=bbb 처럼 구성된다. & 뒤에 추가도 가능하다.
Path 주소 뒤에 동적라우팅 만들기 (속성을 이용하는 방법)
-> /cat/어떤이름이 들어올지 모르지만 들어올 예정(동적라우팅) 의 경우,
->/cat/:cat_name 처럼 : 콜론을 붙인 파라미터를 준다.
그리고 해당 js 파일에서
import { useParams } from "react-router-dom"; 후 (useParams 라는 리액트 훅 사용)
App.js 에 url을 라우팅하던 컴포넌트 아래에 const 상수값을 지정해준다.
Path 주소 뒤에 동적라우팅 만들기 (자식 컴포넌트를 이용하는 방법)
Props에 component={Cat} 와 같이 해당 자식 컴포넌트를 넣어주기만 하면 된다.
하지만 이때에는 라우트태그 로 감싸고 있던 컴포넌트 태그는 없애주어야한다.
이 방법의 경우 콘솔에서 여러가지 내용들이 확인 가능하다.
링크 사용법은 a 태그와 흡사하다. 물론 임포트가 필요하다.
모든곳에 링크를 쓸수 없을 때 history를 사용한다. (자식컴포넌트로 동적라우팅 만들때 콘솔에서확인 가능했던)
자식컴포넌트로 라우팅하지 않고 속성으로 라우팅 할때에도 리액트 훅을 사용해서 히스토리를 사용할 수 있다.
물론 임포트 해줘야한다.
Switch의 기능 -> 스위치는 모든 라우터들을 순차적으로 현재 페이지의 url과 맞는지 확인해서 라우팅 시켜준다.
만약 첫번째 두번째 ….마지막 직전까지 맞는 라우팅이 없다면 맨 마지막 라우팅을 실행시킨다.
스위치가 없을때에는 순차적으로 맞는지 확인하지 않고 그냥 가능한 라우팅을 다보여주기때문에,
특정 주소에서만 보여주고 싶은 컴포넌트가 그대로 노출되어버리는 경우가 있다.
<지금까지 사용했던 yarn add 목록>
Styled-components : yarn add styled-components
Route : yarn add react-router-dom
Redux : 패키지는 기본적으로 2개 동시에 설치 yarn add redux react-redux
Redux-thunk : yarn add redux-thunk
Firebase : yarn add firebase