팀 프로젝트 구현
Component vs Element
https://ko.reactjs.org/docs/rendering-elements.html
엘리먼트 렌더링 – React
A JavaScript library for building user interfaces
ko.reactjs.org
Component
HTML, Style, 로직을 담을 수 있으며, 상태와 이벤트를 가질 수 있다.
컴포넌트는 트리 구조로 이루어져 있다.
props라는 입력을 받아 화면에 어떻게 표시되는지를 기술하는 Element를 반환하는 함수이다.
컴포넌트의 이름은 항상 대문자로 시작한다.
- 함수 컴포넌트
- 클래스 컴포넌트
여러 개의 컴포넌트가 모여 하나의 App을 만든다.
Element
React 앱의 가장 작은 단위로, 화면에 표시할 내용을 기술한다.
변경이 불가능한 객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
Element는 Component의 "구성 요소"이다.
UI를 업데이트 하는 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달해야 한다.
propTypes 설정하는 것이 생각보다 귀찮고 어렵다.
개발자도구의 warning 메시지를 참고하여 해결했다.
컴포넌트 안에 엘리먼트가 있는 경우, props로 children을 받아 추가해줘야 화면에 렌더링된다.
children의 PropTypes를 위와 같이 정의할 수 있다.
오늘 한 작업
메인 페이지 UI 구성 및 모달 창 구현, NAVIGATION
https://github.com/CNU-SW6/proj-fe/tree/mainpage
GitHub - CNU-SW6/proj-fe: CNU SWAcademy 6조 frontend 레포입니다.
CNU SWAcademy 6조 frontend 레포입니다. Contribute to CNU-SW6/proj-fe development by creating an account on GitHub.
github.com
'SW Academy' 카테고리의 다른 글
| [CNU SW Academy] 38일차(23.01.25) (0) | 2023.01.25 |
|---|---|
| [CNU SW Academy] 37일차(23.01.20) (0) | 2023.01.25 |
| [CNU SW Academy] 35일차(23.01.18) (0) | 2023.01.18 |
| [CNU SW Academy] 34일차(23.01.17) (0) | 2023.01.17 |
| [CNU SW Academy] 33일차(23.01.16) (0) | 2023.01.17 |