[React 개발 기록장][2번째 이야기] 엘리먼트와 컴포넌트, antd 적용시키기

1. antd 적용시키기

● antd란?

쉽게 react식 부트스트랩이라고 생각하자.

admin과 같은 부수적인 관리 페이지에서 사용할 용도로 적용

 

● antd 적용법

1. yarn add antd

▶ 꼭 package.json 이 있는 경로에서 추가해줘야함!!!

2. app.css 파일에

@import '~antd/dist/antd.css' 추가

or 

app.js 상단에

import'./antd/dist/antd.css'

import하기

 

2. 엘리먼트/ 컴포넌트

▶Component란?

props(속성값), state(상탯값),element, logic 으로 이루어진 재사용이 가능한 독립된 모듈

-> 레고블록처럼 여러 컴포넌트들을 조합해서 하나의 오브젝트를 만들 수 있다

 

▶Element 란?

 

Componenet에서 화면을 당담, react앱에서 가장 작은 단위

 

▶Component에  props 지정하는 방법

 

1. class 형

-> class를 선언하고, render() return에서 this.props로 정보를 가져옴

-> map으로 하나씩 돌면서 이름과 (react 선언에서 필요한 key 값, 각자 고유한 key값이 있어야함)을 얻어오고

-> li 태그에 넣어준다

-> function App 에서는 변수로 array 지정하고(코딩 할 때는 서버로부터 정보를 얻어올거야) 호출

 

2. 함수형

React.createElement(html태그, 등등 추가해서 만들어야함)

->처음이니까 class에 익숙해져보자

 

● react는 DOM에 직접 접근하지 X (할 수는 있다 굳이 안함)

=> React Element와 일치하도록 DOM을 업데이트