HOC = function(컴포넌트) { return 새로운 컴포넌트; }
HOC는 컴포넌트 로직을 재사용하기 위한 React의 기술이다. 컴포넌트를 가져와서 개로운 컴포넌트로 반환하는 함수이다.
HOC는 입력된 컴포넌트를 수정하지 않으며 상속을 사용하여 복사하지도 않는다. 원본 컴포넌트를 컨테이너 컴포넌트로 포장하여 조합한다. 즉, 사이드 이펙트가 없는 순수 함수이다!
훅(hook)으로 인해 hoc의 사용량이 줄어들어 중요도가 다소 낮아졌다.
주의사항
npm i react-router-dom
<BrowserRouter>
브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다.
웹에 HTML5 History API를 사용하여 페이지를 새로고침 하지 않아도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 한다.
<Route>
컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 한다.
path를 통해 URL을 분기시킨다. 중첩이 가능하다.
exact는 path 속성에 넣은 경로값이 정확히 일치해야 랜더링되도록 한다. exact를 사용하지 않으면 “/profile”경로가 “/”경로에도 반응하게 된다.
<Link>
HTML의 <a>태그와 유사한 기능을 한다.
to 속성에 설정된 링크로 이동한다.
react router에서는 <a>태그를 사용할 수 없기에 해당 컴포넌트를 사용한다. <a>태그는 모두 새로 가져오기 때문에 해당 태그는 사용할 수가 없다.
Link를 통해 페이지를 전환하면 새로운 페이지를 부르지 않아도 애플리케이션은 그대로 유지한 채, HTML5 History API를 사용하여 페이지의 주소만 변경한다.
<NavLink>
activeClassName, activeStyle 처럼 active 상태에 대한 스타일 지정이 가능하다.<Switch>
자식 컴포넌트
<Redirect>
<Redirect>가 렌더링되면 to가 가리키는 링크로 바로 연결된다.
BrowserRouter 연결 → 페이지 컴포넌트 만들기 → Route path 연결 → Link 컴포넌트 연결
참고 자료 링크
react-router-dom 설치, 라우팅하기
리액트 라우터 기본 사용방법
react-router-dom 시작하기
복잡하게 작성해야 했던 것을 해당 라이브러리 설치만으로 간단하게 만들 수 있다.
npm i classnames
참고 자료
React - classnames
리액트에서 조건부 스타일을 줄때 classNames 라이브러리를 활용해보자!
css-module bind
동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부른다.
css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어준다는 장점이 있다.
styled component 설치
npm i styled-components
사용하기
const 컴포넌트명 = styled.태그명스타일``
만들고자하는 컴포넌트의 render 함수 밖에서 만든다.
import styled from "styled-components";
const StyledButton = styled.button`
// 여기에 원하는 css 작성
`;
export default StyledButton;
스타일 컴포넌트가 자동으로 class를 만들어준다.
단점으로는 css 문법 에러가 발생했을 때, 틀렸다는 것을 알려주지 않는다. 문자열이기 때문이다..! 그렇기에 추가적인 플러그인을 설치해야 한다.
HTML에서 shadow DOM을 이용하여 오염될 수 없도록 만들어준다.
HTML안에 본래의 HTML과 영향을 주지 않는 별도의 HTML 덩어리를 의미한다. 리액트에서 컴포넌트를 사용할 때, 컴포넌트가 스타일이 오염되는 문제가 있다. 이런 문제를 해결하고자 css 모듈, 스타일 컴포넌트가 나왔다.
shadow DOM은 HTML에서 shadow DOM을 이용하여 오염될 수 없도록 만들어준다.
설치
react-shadow 라이브러리 설치
npm i react-shadow
<root.div> 안의 태그들만 별도의 스타일 속성을 지정한다.단점
공통적인 스타일인 경우에도 반복적으로 추가해야 하는 번거로움이 있다.
외부와 내부가 차단되어 있어 document에 지정되어 있는 값을 상대적으로 표현할 때 제약이 발생한다.
React : react-shadow 사용법 , style 독립적으로 넣고 싶을때, App.js 와 index.css 스타일 분리
ant design은 하나의 컴포넌트 모음이며, 이미 디자인된 라이브러리이다.
설치
npm i antd
사용방법
사용하고자 하는 컴포넌트를 Ant Design 페이지에서 찾아, 컴포넌트를 사용한다.
import { Calendar } from "antd";
function App() {
return <Calendar />;
}
Ant Design Icon 사용하기
npm i --save @ant-design/icons
사용
홈페이지에서 사용하고자 하는 아이콘을 클릭하면 컴포넌트가 복사된다. 해당 컴포넌트를 사용하고 싶은 곳에 넣어주면 끝
import { GithubOutlined } from "@ant-design/icons";
function App() {
return <GithubOutlined />;
}
CRA
react, react DOM 라이브러리와는 별개로 이것들을 편하게 사용할 수 있도록 프로젝트를 생성해주는 역할을 한다.
단순히 프로젝트를 생성하는 것이 아니라 개발하면서 필요한 여러가지 기능들을 제공한다.
react 프로젝트 만들기
npx create-react-app 파일명
해당 명령어를 통해 react 프로젝트를 만드는 데 필요한 여러 패키지들이 다운된다.
react-scripts
package.json 파일을 확인하면 react-scripts를 확인할 수 있다.
해당 라이브러리는 CRA 라이브러리이다. 해당 프로젝트를 개발환경에 띄운다던가 배포를 위한 빌드작업을 하는 등의 역할을 한다.
git hook을 쉽게 사용할 수 있도록 해준다.
hook은 git으로 인해 어떤 액션이 발생할때 무언갈 추가로 해주고 싶은 것을 처리해주는 도구이다.
husky는 꼭 git을 설치하고 난 후, 설치해야 한다. (아니면 오류가 발생할 수도..)
# husky 설치
npm i husky -D
# husky에서 git hook을 활성화 시키기 (git hook 설치)
npx husky install
package.json 파일에 해당 코드 추가
"scripts": {
"prepare": "husky install",
...
}
# hook 추가하기
npx husky add ./husky/이름 "npm test"
해당 기능은 언제 사용할까?
커밋이 되기 직전에 코드를 점검할 때 사용한다.
husky는 커밋전에 확인해서 정리가 안되면 커밋을 시키지 않아 강제로 뭔가를 처리할 수 있도록 하기 때문에 점검할 때 유용하게 사용할 수 있다.
따라서 커밋이 되었다는 것은 점검을 마쳤다는 것으로 볼 수 있다.
lint-staged는 stage 상태의 git 파일에 대해 lint와 우리가 설정해둔 명령어를 실행해주는 라이브러리다. 즉, eslint, prettier, husky를 자동화 해주는 거랄까?!
여기서 stage 상태란, 파일들이 git add로 커밋 대상이 된 상태를 말한다.
# hook 추가하기 (husky 설치 후)
npx husky add ./husky/이름 "lint-staged"
# lint-staged 설치
npm i lint-staged -D
package.json 파일에 lint-staged 설정을 추가할 수 있다.
해당 확장자를 가진 것 혹은 특정 파일이 커밋될 때, 무언갈 하겠다는 의미이다.
"lint-staged": {
"**/*.js": [
"eslint --ifx",
"git add"
]
}
해당 코드는 어느 파일에서든 js 확장자를 가진 파일이 커밋된다면 eslint를 통해 fix하고 git에 add를 하겠다는 의미이다.
추가로 prettier도 사용한다면 prettier 패키지 설치 후 prettier —write 명령어를 추가 작성해주면 된다.
생성(mounting) → 업데이트(updating) → 제거(unmounting)
리액트 컴포넌트는 라이프 사이클 메서드를 사용하며, 함수형 컴포넌트는 Hook을 사용한다.
Mount
컴포넌트가 생성될 때
constructor
컴포넌트 생성자 메서드로, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드이다.
props, state에 접근이 가능하며 리액트 요소를 반환한다.
getDerivedStateFromProps
props로부터 파생된 state를 가져온다. (props로 받아온 것을 state에 넣어주고 싶을때 사용한다.)
render
컴포넌트를 랜더링한다.
componentDidMount
컴포넌트 출력물이 DOM에 랜더링 된 후에 실행된다. 즉, 첫번째 랜더링을 마치면 호출된다.
해당 메서드가 호출된다면 화면에 컴포넌트가 이미 나타난 상태이다.
Updating
컴포넌트가 업데이트 될때
getDerivedStateFromProps
props나 state가 바뀌었을 때 호출된다.
시간 흐름에 따라 변화되는 Props에 state가 의존하는 드문 경우를 위해 존재한다고 생각하면 된다.
shouldComponentUpdate
컴포넌트가 리랜더링 할지 말지를 결정한다.
getSnapshotBeforeUpdate
render가 되고 실제로 DOM에 적용되기 직전에 호출된다.
DOM에 적용되기 직전의 상태를 기억했다가 DOM에 적용된 직후에 조절할 것이 있을 때 사용한다.
componentDidUpdate
컴포넌트가 업데이트 되고 난 후에 발생한다.
Unmount
unmount는 컴포넌트가 화면에서 사라졌을 때를 말하는데 생명주기는 죽기 직전까지이므로, 화면에서 사라지기 직전을 의미한다.
componentWillUnmount
컴포넌트가 화면에서 사라지기 직전에 호출된다.
DOM에 등록했던 이벤트를 제거하거나 setTimeout을 사용했다면 clearTimeout을 사용하여 제거한다.
ComponentDidCatch
component의 에러를 캐치한다.
해당 라이프사이클이 일어난 하위 컴포넌트에서 문제가 발생했을 때, 부모 컴포넌트에서 에러 화면이 아닌 다른 화면을 보여줄 수 있도록 한다.
에러가 발생했다는 화면은 개발환경에서만 보여지고 실제 유저에게 보여지는 화면은 빈 화면이 나오게 된다. 이런 상황에서 혼란을 방지하기 위해서 에러가 발생했을 때, 빈 화면이 아닌 에러가 발생했다는 문구의 화면을 보여줄 수 있도록 하는 것이 해당 메서드이다.