SEB_FE_45
Section2. Unit4. React Intro
React의 3가지 특징
- 선언적(Declarative) : 선언적 방식으로 UI 구성할 수 있으며, 수동으로 DOM을 조작할 필요가 없기 때문에 가독성과 유지보수성이 향상됨. 이에 개발자는 어떻게 화면을 그릴지에 집중할 수 있음
- 컴포넌트 기반(Component-based) : 컴포넌트 기반 아키텍처(하나의 기능 구현을 위한 여러 종류의 코드 묶음)를 사용하여 UI 구성함. 컴포넌트는 재사용성과 독립성을 가짐. 개발자는 애플리케이션을 작은 단위로 나눠 개발할 수 있음
- 범용성(Learn Once, Write Anywhere) : 라이브러리인 리액트는 어느 프로젝트에나 사용이 가능함. 많은 개발자들이 사용하고 있기 때문에 유지보수성이 좋음. 모바일개발도 가능함(리액트 네이티브).
JSX가 명시적인 이유
- JSX란 JavaScript XML의 줄임말 => 문자열x, HTML x => JavaScript를 확장한 문법이며, 이를 통해 React 엘리먼트를 만들 수 있음
- JSX가 명시적인 이유는 JavaScript문법과 HTML문법을 동시에 이용하여 기능과 구조를 한눈에 확인할 수 있기 때문임.JSX문법으로 작성한 코드묶음을 컨포넌트라고 함
JSX 규칙
- 여러 엘리먼트를 작성하는 경우에는 최상위에서 openin tag와 closing tag로 감싸주어야 함
- CSS class 속성 지정은 "className"으로 표기해야 함. class로 작성하면, JavaScript 클래스로 받아들임(주의!)
- JavaScript 표현식 사용 시 중괄호( { } ) 이용. 중괄호를 사용하지 않으면 일반 텍스트로 인식!
- 사용자 정의 컴포넌트는 대문자로 시작(PascalCase). 소문자로 작성하면 HTML 엘리먼트로 인식!
- 사용자 정의 컴포넌트란? 리액트 애플리케이션에서 개발자가 직접 정의하고 구현하는 컴포넌트입니다. | 출처: 챗GPT
- 조건부 렌더링에는 if문이 아닌 삼항 연산자 사용!
- 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수 이용. map 함수 사용 시 반드시 "key" JSX 속성을 넣어야 함.
리액트 컴포넌트의 필요성
- 모듈화와 재사용성 : UI를 작은 단위로 나누도 모듈화할 수 있음. 모듈화된 컴포넌트는 재사용이 가능하여, 여러 곳에서 동일한 컴포넌트 사용이 가능함. 이로 인해 개발 생산성 향상에 도움이됨
- 유지보수성 : 독립성을 가진 컴포넌트는 개별적으로 수정, 추가, 삭제할 수 있음. 전체 코드를 수정하지 않아도 되기 때문에 유지보수가 용이해짐
- 선언적 UI개발 : UI 상태에 초점을 맞추고 원하는 결과를 설명하는 방식으로 코드를 작성할 수 있음. 가독성이 높아지며, 개발 과정을 단순하게 해줌
- 성능 최적화 : 가상DOM을 사용하여 효율적인 UI업데이트를 관리함. 수동DOM 조작을 최소화하여 성능 최적화할 수 있음
- 커뮤니티와 생태계 : 많은 개발자가 사용하고 있으며, 커뮤니티와 생태계가 활발함. 도움을 받을 수 있는 자원이 풍부함.
야간 자율학습 과제(React Twittler Intro 과제 레퍼런스의 의사코드를 작성하기)
- App컴포넌트 - <main>태그 하위에 <Sidebar /> 컴포넌트를 추가한다.
- public 디렉토리에 index.html 파일을 열어보면, Font Awesome 링크가 연동되어 있음을 확인할 수 있다. 이에 Sidebar 컴포넌트 <section> 태그 하위에 아이콘을 의미하는 <i>태그를 입력하고, <i>의 css 클래스네임으로 className = "far fa-comment-dots"를 작성한다.
- Features 컴포넌트에 <div className="tweetForm__wrapper"> 하위에 <Counter /> 작성한다.
- 배열( [ ] )로 저장되어있는 더미데이터의 개수는 더미데이터의 길이와 같기 때문에 {'total: ' + dummyTweets.length}를 작성한다(내가 작성한 코드는 total:{dummyTweets[dummyTweets.length-1].id}라고 풀었다.}
- Features 컴포넌트에 <section>태크 하위에 <Features /> 작성한다.
- 이미지 태그를 감싸고 있는 <div>태그를 <footer>로 수정하여, 시맨틱한 코드가 될 수 있도록 수정한다.
- 더미트윗 데이터가 트윗으로 매핑되어 있으므로, div.tweet__profile 하위에 이미지 태그를 작성하고 src={tweet.picture}를 작성한다.
- div.tweet__userInfo 하위 span 태그의 내용으로 {tweet.username}을 작성한다.
- span.tweet__createdAt의 내용으로 {tweet.createdAt}을 작성한다.
- 메시지를 받기 위해서는 div.tweet__message를 생성하고, {tweet.content}를 작성한다.
- 더미트윗 데이터가 매핑되어 화면에 출력된다.
- 삼항연산자를 이용하여 유저 이름이 parhacker이면, tweet__username tweet__username--puple css가 적용될 수 있도록 코드를 작성한다.
- Tweets 컴포넌트 div.tweet__userInfo 하위에 있는 span 태그의 클래스네임에 className = {tweetUserNameClass}를 입력한다.
이러면 최소 요구 기능구현은 끝!
추가적으로 CSS를 구성 중인데, 쉽지않다.....
자바스크립트는 이해해야 할 문법이 많다면...
CSS 코드를 작성하면, 내가 원하는 대로 화면을 구성해볼 수 있는 건 재밌는데...
자꾸 개미지옥에 빠지는 기분...
왜 해놓고 나면 마음에 안드는건지...
암튼 오늘 유닛 복습과 야자과제 끝!
'SEB_FE_45(코드스테이츠) > section 2.' 카테고리의 다른 글
| Unit 8] REST API (0) | 2023.05.25 |
|---|---|
| 데일리코딩 ] 2차원 배열을 이용하여 객체 만들기 (0) | 2023.05.24 |
| 데일리코딩 ] 원금이 3배가 되는 시점 찾기 (0) | 2023.05.18 |
| 데일리코딩 ] 배열을 객체로 바꾸기 (0) | 2023.05.17 |
| TIL] Unit 2. 객체지향프로그래밍(프로토타입과 클래스) (0) | 2023.05.11 |