https://slides.com/woongjae/react2021
https://slides.com/woongjae/fds17th-11
https://slides.com/woongjae/fds17th-12
https://slides.com/woongjae/fds17th-13
https://slides.com/woongjae/redux2021#/2
https://slides.com/woongjae/reactts2021#/2
https://slides.com/woongjae/fds17th-14
https://react.vlpt.us/

React Project

https://create-react-app.dev/

npx 명령어는 커맨드라인 명령어로 라이브러리를 현재 최신버전의 라이브러리인지 확인해서 그것을 실행해주는 커맨드라인 명령어이다.

npx create-react-app tic-tac-toe

위 명령어를 이용해서 우리가 제작할 프로젝트의 패키지들을 설치해주자.

cd tic-tac-toe

package.json 파일을 확인해보면
react, react-dom이 기본이고
이 프로젝트가 개발환경으로 띄우거나, production 모드에서 배포를 위한 build 역활을 하는 것이 react-scripts이다. 이게 곧 create-react-app의 버전이다.

@로 시작하는 것은 테스트를 도와주는 라이브러리들이다.

web-vitals는 사이트에서 사용 환경을 확인해주는 것이다.

그 다음 명령어 4개를 확인할 수 있다.

npm start하면 리액트의 개발환경을 띄울 수 있게 된다.

그럼 위와 같이 돌고 있는 것을 확인할 수 있다.

배포를 위해서는

npm run build

명령어를 이용해서 production용 파일로 바꾸어준다.

그럼 위와 같이 파일들이 있는 폴더가 생긴것을 확인할 수 있다.

이렇게 생성된 프로덕션용 파일을 사용하기 위해서는 build 폴더를 파일 서버처럼 사용하면 된다.

npm install -g serve
serve -s build

를 사용하면 build 폴더가 서버처럼 사용되게 된다.

npx serve -s build를 사용하면 일시적인 최신의 서버를 사용할 수 있다.

하면 위와 같이 나온다. 이 화면은 개발모드와 비슷하지만 우리가 수정한다고 바로 반영되지 않는다.

npm test로 명령어를 실행하면

Jest 모드를 기반으로 테스트를 수행하게 된다.

a : 테스트 수행

npm run eject

우리가 create-react-app에서 우리의 react 프로젝트를 꺼내서 react의 관리를 받지 않겠다는 의미이다. 이것은 react의 환경설정을 custom하게 설정해주기 위해서 사용한다. 하지만 한 번 꺼내면 돌리기 어렵기 때문에 잘 안꺼내는 편이다.

만약하게 되면 엄청나게 많은 라이브러리들이 추가된 것을 확인할 수 있다. 또한 config 폴더가 생기는데 이건 webpack에 대한 설정들이다.

그렇다면 react 프로젝트를 우리가 볼 수 있는 이유는 위와 같다. 전체적으로 보았을때 webpack을 사용한다. webpack은 우리의 파일을 파일 확장자에 맞게 생성한다. 여러 프로젝트 파일들을 loader이라는 이름의 처리기들을 통해서 처리하게 된다. 위의 두가지 loader을 대표적으로 보여주었는데 보다 다양한 loader들이 존재한다.

ESLint

https://eslint.org/

코딩스타일들을 내부적으로 규정하고 모든 개발자들이 공통적으로 그 스타일을 맞출 수 있도록 해준다. 이러한 ESLint는 모든 JS 프로젝트에서 코딩스타일을 미리 맞추어 볼 수 있다.

mkdir eslint-test

cd eslint-test

npm init -y

npm install eslint -D

npx eslint --init

이렇게 하면 설치된 eslint가 초기화 된다.

규칙을 추가해보자

이런식으로 나온다. 하지만 우리가 매번 이걸 검사할 수 없으니 플러그인을 설치하자

빨간줄이 생기었다.

이것을 고치기 위해서는 --fix 라는 명령어를 사용하라고 적히어 있다.

실재 tic-tac-toe에도 eslint가 있는 것을 확인할 수 있다. 사실 이건 module에 들어가 있는 모듈중에서도 eslint-config-react-app을 가지고 온 것이다.

여기에다가 규칙을 작성해보자

이런식으로 rules를 작성해주면 된다.

Prettier

An opinionated code formatter : 코드 자체가 의도적으로 고친다

mkdir prettier-test

cd prettier-test

npm init -y

npm i prettier -D

먼저 위의 명령어를 순서대로 실행하고 prettier-test 폴더로 이동하자

index.js 파일을 만들고 위와 같이 작성했다. 그럼 아래와 같이 고치라고 나오는 것을 확인할 수 있다.

그래서

npx prettier index.js --write를 입력하자

그럼 고치어지는데 이건 상당히 복잡하니 라이브러리 prettier을 추가하고

설정에서 Default Formatter을 설정해주자.

추가적인 설정은 위와 같이 .prettierrc.json을 사용해서 설정해주자.

이제 앞으로 우리가 코드를 짤때 코드가 길어지기 때문에 적절하게 가로길이를 조절하기 위해서 사용할 수 있다.

https://prettier.io/

한가지 주의점은 eslint와 prettier간의 겹치는 설정들이 있을 수가 있다. eslint-config-prettier을 검색해보면 아래와 같은 위치를 찾을 수 있다. 아래와 같이 prettier을 추가로 작성해주면 둘이 충돌되는 경우를 줄여줄 수 있다.

Husky

깃으로 액션 발생시 무언가를 처리해줄 수 있는 것이다. push 전 commit 전 무언가를 하겠다는 것을 처리하는 라이브러리이다.

https://github.com/husky/husky
https://taegon.kim/archives/10276

mkdir husky-test

cd husky-test

npm init -y

git init

npm i huskey -D

code .

허스키에서 git hook을 사용할 수 있게 만들어주기
npx husky install

package.json에 명령어를 추가해주자.

그리고 우리는 git 활동전에 test라는 명령어를 수행하고 싶기 때문에 여기에 훅을 달아주자

npx husky add .husky/pre-commit "npm test"

로 했는데 계속 안된다. 미친... 일단 윈도우 환경이였던것도 문제였고

계속 쓰잘데기 없는 사용법만 알려주어서 사용이 너무 어려웠다.

그러다 유일하게 찾은게 아래 명령어이다.

npx husky add .husky\pre-commit

까지는 된다.

하면 위와 같이 만들어진다. 그럼 여기에다가 우리가 원래 적을려고 했던 내용을 적으면 되지 않을까 싶었다.

개꿀

그 다음

git add .

git commit -m "husky test"

하면 위와 같이 나온다. 이건 package.json에서 exit 1을 하기 때문에 정상 종료하지 못해서 생긴문제점이다.

그럼 우린 커밋직전에 prettier과 eslint를 이용해서 점검을 미리 수행해보자.

참고로 혹시나 이런 에러가 뜨면 아래 블로그를 참고해 고치자

https://dabo-dev.tistory.com/13

git config --global core.autocrlf true

lint-statged(husky와 eslint, prettier 연결)

tic-tac-toe 프로젝트로 이동하자

npm i husky
git init
npx husky install

package.json

이 명령어를 추가하면 나중에 시작할때 자동으로 husky가 설치될 것이다.

npx husky add .husky\pre-commit "lint-staged"
npm i lint-staged -D
npm install prettier -D

참고로 그냥 위와 같이하면 에러가 난다.

그래서 위와 같이 npx를 붙여주자.

이제 lint-staged가 무엇을 할지에 대해 규정해주자.

package.json 파일안 eslintConfig 바로 아래에 lint-staged를 추가해주어서 js 파일이 추가될때 명령어들이 수행되도록하였다.

이제 App.js 에서 일부분을 수정해보았다.

그리고
git add .
git commit -m "lint staged"

하니까

여러가지 내용이 뜨면서 결국에는 우리가 필요했던 형식으로 바뀐 것을 확인할 수 있다. 이러한 방식으로 협업을 할 수 있다.

react project 이해하기

index.js
리액트 프로젝트의 메인 파일이다.

React.StrictMode는 강제로 엄격하게 React를 사용하는 모드라고 생각하면 된다.

App은 App.js에 작성되어 있는 컴포넌트이다.

그리고 id가 root라는 돔에 이 컴포넌트가 그려지고 있다.

public의 index.html 파일로 가보면 root인 id를 가진 태그가 있는 것을 확인할 수 있다.

public한 파일을 갖다줄 수 있는 폴더라고 생각하자

App을 import 되어 있는 것을 확인할 수 있다. import 하게 되면 webpack이 해당파일의 확장자에 맞추어 loader을 이용해서 import 하게 된다.

index.css를 확장자인 파일을 import 하면 소스코드안에 분할된 css 코드들이 자동으로 들어가게 된다.

App.js 를 가보면 react가 import 되어 있지 않은 것을 확인할 수 있다. 이건 메인인 index.js에서 이미 react를 받아왔기 때문에 다른 js 파일에서는 따로 import 해주지 않아도 되는 것이다.

위에도 App.css가 import 되어 있는 것을 확인할 수 있다.

svg 파일도 import 되어 있는 것을 확인할 수 있다. 이 방식을 이용하면 img src로 해당 파일을 사용할 수 있게 된다.

React Developer Tools

https://github.com/facebook/react-devtools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko

실재로 설치하고

npm start 명령어로 실행시키어보자

사이트 개발자 모드를 보면 위와 같이 Components와 Profiler가 있다.

하면 위와 같이 Component 별로 관리를 할 수 있고 props를 임의로 입력할 수도 있다.

Profiler는 나중에 이 프로젝트의 성능을 측정할 수 있다.

리액트 라우팅

과거에는 이러한 방식으로 브라우저에서 서버로 무언가를 요청하고 페이지를 받아왔다.

하지만 react로 넘어오면서 Single Page Application 약자로 큰 앱을 받아오게 된다. 서버로부터 전체묶음을 받아오고 브라우저에서 url에 따라서 어떤것을 보여줄지 결정하는 것이다.

SPA 라우팅 과정

1. 브라우저에서 최초에 '/' 경로로 요청을 하면,

2. React Web App 을 내려줍니다.

3. 내려받은 React App 에서 '/' 경로에 맞는 컴포넌트를 보여줍니다.

4. React App 에서 다른 페이지로 이동하는 동작을 수행하면,

5. 새로운 경로에 맞는 컴포넌트를 보여줍니다.

이러한 역활은 react의 역활을 벗어난다. react는 컴포넌트를 만들고 보여주는데 치중하는데 지금하는 것은 브라우저의 url과 어떤 컴포넌트를 보여줄지를 처리하는 라이브러리가 필요하다. 그래서 react router dom이 필요하게 되었다.

npm i react-router-dom

위의 패키지를 사용하게 되는데 SPA를 구현해주는 패키지이다.

npx create-react-app react-router-example

cd react-router-example

npm i react-router-dom

특정 경로에서 보여줄 컴포넌트를 준비하자

시작전에 이 라이브러리를 설치하고 가자

이제 App.js에서 React-router-dom에서 가져온 컴포넌트를 사용해보자.

결과 이렇게 나오는 것을 확인할 수 있다.

• Route 컴포넌트에 경로(path) 와 컴포넌트(component) 를 설정하여 나열해줍니다.

• BrowserRouter 로 Route 들을 감싸줍니다.

• 브라우저에서 요청한 경로에 Route 의 path 가 들어있으면 해당 component 를 보여줍니다.

추가적으로 exact를 사용하면 정확히 동일한 path와 url일 경우에만 보여주는 방식으로 변경이 된다.

Dynamic 라우팅

저번시간에는 매우 고정적인 경로였다. 하지만 개발을 하다보면 url을 동적으로 처리해서 어떤 값을 받아와서 처리해주는 일을 종종하게 된다. 어떻게하면 동적 라우팅을 하게 되는지 배워보자.

/:id로 입력받을 수 있다.

실재로 보면 props는 위와 같이 3개가 온 것을 확인할 수 있다.

match props를 보니 위와 같이 id값이 정의되어 있는 것을 확인할 수 있다.

직접 match에 있는 내용을 꺼내보니 위와 같이 string으로 온 것을 확인할 수 있다.

조금 더 만지어 보아서 id 값을 직접 출력해보았다.
참고로 지금 사용한 {id &&} 은 조건부 렌더링이라는 문법이다. id값이 있을때만 출력된다.

---

query string을 붙여보자 쿼리 스트링은 있든 없든 about이기 때문에 추가적인 라우팅이 필요하지 않는다.

위와같이 ?name=mark로 작성했는데 나온 것을 보니 뭔가 우리가 처리할 수 있는 객체 형태가 아니다.

위와 같이 꺼내왔다.

이것을 해결하기 위해

URLSearchParams를 사용해보자.

이 방식의 단점은 URLSearchParams의 함수를 모두 기억해야 한다.
그리고 브라우저에 따라서 지원하지 않을 수도 있다.

name이 이쁘게 나온 것을 확인할 수 있다.

이것을 해결하는 방법은 npm 라이브러리를 사용하는 것이다.

npm i query-string

queryString을 가지고와서 parse로 잘라내면 위와 같이 객체로 출력되는 것을 확인할 수 있다.

잘 활용해서 위와 같이 출력되게 만들 수 있다.

Switch와 Not FOUND

라우터 중 순서대로 먼저 맞는 하나만 보여주고 에러나면 NOT FOUND 띄어주는 컴포넌트이다.

Switch 문은 위와같이 선언해주면된다. 첫번째것이 틀리면 그 다음 그 다음으로 점차 내려간다.

이렇게하면 exact를 쓰지 않고도 비슷한 효과를 낼 수 있게 된다. 그래서 가장 넓은 범위를 가급적 아래에 내린다.

가장 마지막 부분만 exact를 넣어주었는데 root 경로는 모든 경로가 가지고 있는 경로이기 때문이다.

그리고 이거조차 아니면 NOT FOUND를 넣어주어야 한다.

이제 NotFound.jsx를 만들어주자

실재로 만들지 않은 경로로 가니 위와 같이 NotFound 컴포넌트가 실행된 것을 확인할 수 있다.

JSX 링크로 라우팅 이동하기

리액트 애플리케이션 내부에서 페이지를 이동하는 방법을 이야기 한다. 보통은 a태그로 이동했지만 리액트에서는 문제가 생긴다.

a 태그는 그냥 특정 경로를 입력해주는 방식과 크게 다르지 않게 이동한다.

위와 같이 Link라는 태그를 사용한다. a와는 다르게 새로고침이 이루어지지 않는다.

그리고 새로운 파일을 받아오려고 하지도 않는다.

component라는 폴더를 만들어서 Links.jsx 파일을 만들어주자.

내부에 위와 같이 작성해주자.

그리고 컴포넌트를 연결해주니 위와 같이 나온 것을 확인할 수 있다.
그러면 굉장히 빠르게 페이지를 이동하는 것을 확인할 수 있다.

JSX 링크로 라우팅 이동하기(네비게이션 링크)

NavLink는 active가 있다는 차이점이 존재한다. NavLink에 설정된 to와 브라우저 링크가 일치시 처리해주는 것이다.

NavLinks.jsx를 components 폴더에 넣은 다음 Links.jsx 파일을 그대로 복붙하고 Link -> NavLink로 바꾸어주자

여기에 activeStyle을 지정해주자.

그런데 이상한 점은 루트가 아님에도 모든 경로에서 Home 링크만은 green으로 표시된다. 이것을 막기 위해 exact 키워드를 모두 적어주자 그러면 루트경로일때만 초록색 링크가 나오는 것을 확인할 수 있다.

profile/1은 구지 exact를 써주지 않아도 이미 세분화 되어서 해줄 필요가 없다.

about과 같은 경우 queryString이 있다보니 위와 같이 적어줄 수 없다. 그래서 isActive 함수를 이용해서 받아온 값이 존재했을 경우에만 색을 처리해줄 수 있도록 변경해주었다.

그런데 위와 같이 profile에 쿼리스트링을 보내면 두개다 초록색으로 바뀐다. 이것은 isActive가 queryString만을 보기 때문에 생기는 문제점이다. 이것을 해결하기 위해서는 match를 이용하자

match를 실재로 출력해보니 위와 같이 된다.

match가 널이 아닐때만 처리되도록 코드를 짯다. 이렇게 하니 profile에 어떠한 쿼리스트링을 날리어도 변하지 않는 것을 확인할 수 있다.

JS 로 라우팅 이동하기

보통 리액트 애플리케이션이 아니면 location.href로 바꾸었지만 브라우저단이 아닌 서버단에서 페이지를 가져오는 특성이 있기 때문에 리액트 방식으로 라우팅하는 코딩을 해보자.

Login.jsx 를 만들어서 props를 찍어보았다. 현재 null이 들어온 것을 확인할 수 있다.

props에 history에 루트를 넣어주니 버튼을 누르고 1초후에 home으로 이동하게 된다.

하지만 리액트 프로젝트는 계속하다보면 그 크기가 굉장히 커지고 로그인 기능이 맨 아래에 들어가질 수도 있다.

우선 컴포넌트에 위와 같이 LoginButton을 만들어주자.

그리고 Login 자체를 위와 같이 LoginButton을 사용할 수 있도록 바꾸어주었다.

하면 로그인시 위와 같이 props가 없다는 에러가 뜬다. 이걸 가장 쉽게 해결하는 방법은 props를 직접적으로 넣어버리는 것이다.

하면 정상적으로 Home으로 바뀌는 것을 확인할 수 있다. 하지만 이게 만약 다양한 정보를 넣는 로그인 창 맨 아래에 있다면 계속해서 props를 내려주어야 하는 문제점이 생긴다. 그래서 이러한 방식은 가급적 사용하지 말아야한다.

withRouter이라는 HOC를 사용하자. 이건 이전에 컴포넌트의 겨과를 받아서 사용하게 된다.

HOC에 대한 정보는 아래 블로그에서 확인하자
https://velog.io/@hwang-eunji/React-%EA%B3%A0%EC%B0%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-HOC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Redirect

render 이라는 props도 존재한다. render는 함수를 지정해주는 곳이다. 컴포넌트의 랜더와 마찬가지로 JSX를 이용해서 사용, JSX 엘리먼트는 경로와 맞을때 render가 되게 된다.

App.js를 위와 같이 바꾸었다.

isLogin의 상태에 맞추어서 login 페이지가 홈으로 가거나 Login 페이지로 갈지가 결정된다.

이게 바로 redirect 컴포넌트이다.

React Component Styling

Style Loaders

.css 확장자를 처리할 경우 style-loader나 css-loader을 사용하게 된다. webpack 설정이 파일확장자에 맞는 loader에 위임

npx create-react-app style-loaders-example

먼저 프로젝트를 만들자

npm run eject

config > webpack.config.js에 가면 위와같이 작성되어 있는 것을 확인할 수 있다.

이 로더는 getStyleLoaders에서 가져온 결과를 사용한다. 이 loader가 사용하는 파일이 cssRegex이면서 cssModuleRegex가 아닌것이다.

위와같이 import하면 styles가 들어온다.

scss, sass를 import하면 css가 들어와서 전역적으로 사용하게 된다.

module.scss를 가지고오면 styles로 사용이 가능해진다.

CSS, SASS

// App.js

import './App.css';

App.js에서는 위의 css를 사용한다. react의 경우는 문서구조 + 스타일 + 동작에서 스타일이 특정 스타일에 귀속되는 형태로 제공되지 않는다. 컴포넌트 별로 스타일을 제공하는 방법이 제공되지는 않았다. 그래서 팀 내에서 규칙을 정해서 처리하게 된다.

그러다보니 클래스이름이 오염화되지 않는 것이 중요해졌다.

그런데 이걸 또 위계를 줄 수 있다.

http://getbem.com/naming/

그래서 BEM이라는 방식을 이름을 정하는 방법론이 나왔다.

결국 css의 한계점을 해결하기 위해서 sass방법론이 나왔다.

실재 코드에서 App-뭐시기 되어있던 부분들을 지워 주었다.

새롭게 App.scss 파일을 만들어서 .App 부분들을 지워주자

하고 App.js를 바꾸어주면 에러가뜬다...

npm i sass를 해주자.

정상적으로 돌아가는 것을 확인할 수 있다.

CSS module, SASS module

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

자동으로 CSS가 오염이 되지 않도록 해주는 모듈들이다.

App이라고 하는 얘들은 다른 얘들과 겹치지 않을꺼 같은 이름으로 되어 있다.

실재 코드를 열어보니 위와같이 되어있다. sass의 역활은 1. 우리의 실재 코드를 변환하고 스타일에 추가, 2. import한 style 객체와 변경된 이름으로 지정해준 것을 확인할 수 있다.

그래서 위와같이 작성해주는 것으로 module.css는 오염되지 않은 클래스명을 제작해주는 것이다.

그리고 Button 컴포넌트를 넣어준 결과 정상적으로 버튼이 출력되는 것을 확인할 수 있다.

이번에는 버튼을 눌렀을때 로딩상태를 표시하기 위해서 해당 스타일을 적용해보자

조건부 클래스 네임을 적용해보고 또 여러개의 클래스 네임을 적용해보자

먼저 버튼 css에 loading 클래스를 추가해주자.

startLoading을 사용할건데 Event에 바인딩 되는 함수는 반드시 화살표를 사용해야 this를 사용할 수가 있다.

클래스를 여러개를 쓸려면 클래스 사이에 띄어주어야 하기 때문에 템플릿 스트링으로 묶어주고 스타일을 $로 이어준다.

이렇게 작동하는 것을 확인할 수 있다.

그런데 코드가 너무 복잡하다고 느끼어진다. 이러한 클래스 사용을 쉽게 사용할 수 있게 해주는 라이브러리가 classnames이다.

npm i classnames

객체로 넘기어 주었더니 bool 타입에 따라서 출력을 결정한다.

false 한 값은 출력이 되지 않는 것을 확인할 수 있다.

이렇게 적용가능하지만 작동하지 않는다. 그래서 classnames에 있는 bind라는 함수를 사용하자

먼저 함수를 가지고 오고

더 간단해졌다.

정상적으로 작동한다.

Styled Components

별도의 라이브러리를 사용해서 더 편리하게 스타일을 먹이는 방법을 사용하는 방법에 대해 알아보자.

npx create-react-app styled-components-example

로 프로젝트를 새롭게 제작하자

npm i styled-components를 설치하자

src 폴더 아래에 components 폴더를 만들자 그리고 StyledButton.jsx 파일을 만들자

컴포넌트를 가지고 오면 위와 같이 버튼이 생기는 것을 확인할 수 있다.

찾아보니 sc(styled components)로 시작하는 클래스가 적용된 것을 확인할 수 있다.

버튼에 성분을 추가하니 위와 같이 성분이 추가된 것을 확인할 수 있다.

그런데 템플릿 스트링을 사용한 곳에서는 내가 에러가 낸 것도 알 수가 없다. 그러다보니 이걸 사용하게 되면 신중하게 사용해야만 한다.

여러가지 속성을 넣어서 바꾸어 보았다.

---

StyledButton에 props를 보내는 방법을 알아보자

위와 같이 단순한 키워드로 집어 넣었다. 그냥 단어만 적으면 true로 인식한다.

이걸 가지고 위와 같이 props를 받아 primary 존재시 새로운 css 내용을 추가해준다고 하면

이와같이 생성된다.

또는 App.js에 직접 변수를 만들고 StyledButton에 스타일을 주겠다고 입력해도 스타일이 먹여진다.

혹은 as를 써서 다른 태그로 바꿀 수도 있다.

혹은 위와같이 임시로 속성을 넣어줄수도 있다.

보다 일반적인 방법은 위와같이 styled를 열고 성분을 넣은 다음 바로 컴포넌트로 사용하는 것이다.

실재로는 위와같이 짜는 것이 더 낫다.

이번에는 props에 따라서 색이 바뀌게 만들어보자

위와 같이 작성하면 요청에 따라 색이 바뀌도록 만들 수 있다.

그외에도 다양한 효과를 당연하게도 넣을 수 있다.

이렇게하면 다른 스타일이 방해를 놓지 않는다는 장점이 존재한다. 전역적으로 처리해주는데에는 어려움이 존재한다. 그래서 글로벌 스타일을 만들고 추가해보자

이렇게 작성하고 코드내에 rendering 해주어야한다.

하면 태그가 나오는데 이걸 눌렀을때 새창이 뜨도록 제작하고 싶다고 target을 매번 적기 귀찮다면 아래와 같이 작성할 수 있다.

이렇게하면 태그에 구지 target을 지정해주지 않아도 target 성분을 가지게 된다.

React Shadow

웹 컴포넌트 : 표준을 이야기 한다. 그 중에서도 잘 설명해 놓은게 웹 컴포넌트이다.

https://developer.mozilla.org/ko/docs/Web/Web_Components

본래 html에 영향을 미치지 않는 html을 Shadow DOM이라고 부른다.

npx create-react-app react-shadow-example

npm i react-shadow

App 컴포넌트에 이거 자체만에 shadow-dom을 이용하면 다른곳에 영향을 받지 않을 것이기 때문에 여기에 작업해보자

App.css는 지우고 react-shadow을 넣은 다음

root.div안에 기존 내용을 모두 넣자

그럼 p 태그의 빨간색이 없어진 것을 확인할 수 있다.

App.css 에 있는 내용 모두 styles에 넣고

가장 아래쪽에 style을 넣었더니

원래대로 돌아왔다

예를 들어 위와 같이 p에 대한 속성을 넣으면 위와 같이 된 것을 확인할 수 있다.

하지만 이것의 단점은 공통 css는 처리불가능하고
외부와 내부가 차단되어 있기 때문에 document에서 값을 받아 상대적으로 표현할때 제한이 있다.

Ant Design

이미 디자인된 라이브러리를 사용하면서 쉽게 UI를 만들어보자

npx create-react-app antd-example

npm i antd

안트디자인의 css 디자인을 적용하는 걸 먼저해주어야 한다.

https://ant.design/

https://ant.design/components/calendar/

캘린더를 한번 넣어보자

이러한 css파일을 한번에 가져오기보다는 모듈만 가져오는 방법이 존재한다.

이렇게 작성할 수 있다.

하지만 이렇게 작성하는게 귀찮다면

아래와 같이 eject해서 쓰는 방법이 존재한다. 하지만 가급적하지는 말자...

npm install --save @ant-design/icons

가장 중요한것은 컴포넌트 외부에서 내부로 정보나 설정을 넣어준다거나 행위를 하겠다는 함수를 넣어주겠다하는 식으로 작업을 한다. 컴포넌트를 외부에서 받을때 가장 중요한 것은 props가 무엇인지 아는것이다.

그래서 페이지 아래로 쭉 내리면 위와 같이 props라고 적히어 있고 api라고 한다.

---

antd의 레이아웃을 잡는 방법을 알아보자

antd에는 row, col이 존재한다.

이때 span은 col이 차지하는 공간을 이야기 한다. 총 span의 합이 24이어야 하기 때문에 col 별로 나누어준다.

하면 위와같이 나오게된다.

gutter이라는 개념도 존재하는데 이건 row간에 간격을 나눈다는 뜻이다.

offset 개념도 존재

row에 justify, align을 줄수도 있다.