Create React App
CRA
react, react DOM 라이브러리와는 별개로 이것들을 편하게 사용할 수 있도록 프로젝트를 생성해주는 역할을 한다.
단순히 프로젝트를 생성하는 것이 아니라 개발하면서 필요한 여러가지 기능들을 제공한다.
husky
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"
lint-staged
husky, lint-staged를 사용하자( sub : ESLint 자동화하기 )
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 명령어를 추가 작성해주면 된다.
Component Lifecycle
[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook
Component – React
생성(mounting) → 업데이트(updating) → 제거(unmounting)
리액트 컴포넌트는 라이프 사이클 메서드를 사용하며, 함수형 컴포넌트는 Hook을 사용한다.
-
Mount
컴포넌트가 생성될 때
-
constructor
컴포넌트 생성자 메서드로, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드이다.
props, state에 접근이 가능하며 리액트 요소를 반환한다.
-
getDerivedStateFromProps
props로부터 파생된 state를 가져온다. (props로 받아온 것을 state에 넣어주고 싶을때 사용한다.)
-
render
컴포넌트를 랜더링한다.
-
componentDidMount
컴포넌트 출력물이 DOM에 랜더링 된 후에 실행된다. 즉, 첫번째 랜더링을 마치면 호출된다.
해당 메서드가 호출된다면 화면에 컴포넌트가 이미 나타난 상태이다.
-
Updating
컴포넌트가 업데이트 될때
-
Unmount
unmount는 컴포넌트가 화면에서 사라졌을 때를 말하는데 생명주기는 죽기 직전까지이므로, 화면에서 사라지기 직전을 의미한다.
-
ComponentDidCatch
에러 경계(Error Boundaries) – React
component의 에러를 캐치한다.
해당 라이프사이클이 일어난 하위 컴포넌트에서 문제가 발생했을 때, 부모 컴포넌트에서 에러 화면이 아닌 다른 화면을 보여줄 수 있도록 한다.
에러가 발생했다는 화면은 개발환경에서만 보여지고 실제 유저에게 보여지는 화면은 빈 화면이 나오게 된다. 이런 상황에서 혼란을 방지하기 위해서 에러가 발생했을 때, 빈 화면이 아닌 에러가 발생했다는 문구의 화면을 보여줄 수 있도록 하는 것이 해당 메서드이다.
JSX
JSX 소개 – React
Babel
babel이 html 문법으로 작성한 형태를 React createElement 형태로 변환시켜준다. 즉, 어렵게 작성하지 않고 html 형태로 작성해도 된다.
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
<h1 className="greeting">
Hello, world!
</h1>
</div>
);
-
JSX 사용 이유
React.createElement 보다 가독성이 훨씬 좋다.
babel과 같은 컴파일 과정에서 문법적 오류를 인지하기가 쉽다.
-
JSX 규칙
최상위 요소가 하나여야 한다. (최상위 요소가 두개 존재하면 error)
만약! 같은 최상위 요소를 두개 만들고 싶다면? Fragment를 사용한다.
<></> 태그를 최상위 요소로 사용하는 것이다.
중괄호{}를 사용하여 자바스크립트 표현식을 사용한다. (중괄호 안에 문자열, 변수 등)
if문은 사용할 수 없다.
삼항 연산자 혹은 &&를 사용한다.
class 대신에 className을 사용해서 class를 적용한다.
자식요소가 있다면 꼭 닫아야 하며, 자식요소가 없으면 열면서 닫아야 한다.
Props와 State
두가지 모두 변경이 발생하면 render가 다시 일어날 수 있다. 즉, 컴포넌트는 다시 그림을 그리려고 한다.
Event Handling
HTML DOM에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어나도록 한다.
Event Handling은 camelCase로만 사용할 수 있다. (onClick, onMouseEnter)
이벤트에 연결된 자바스크립트 코드는 함수이다. (이벤트={함수}와 같이 쓴다.)
실제 DOM 요소들에만 사용이 가능하다. (리액트 컴포넌트에 사용하면, 그냥 props로 전달된다.)
function Component() {
return (
<button
onClick={() => {
console.log("clicked")
}}
>
click!
</button>
)
}