Section2 - Unit4 [React intro]

체크포인트

JSX 특징

• React에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법(!! 포인트는 '문법' 이라는 것)
• JSX는 바로 브라우저가 해석할 수 있는 코드가 아니기 때문에 Babel을 통해 JS 코드로 변환해줌

  • Jsx -> Babel을 통한 JSX 컴파일 -> JS -> 브라우저

• HTMd와 JS의 문법 모두를 사용해 기능과 구조가 명시적인 코드를 작성할 수 있음
• 이렇게 작성한 구조와 동작 대한 코드를 컴포넌트(Component)라고 함

JSX 규칙

• element를 작성할 때 모든 태그는 최상위 태그를 통해 감싸져 있는 구조를 가져야 함
• element의 클래스 속성을 부여할 땐, className으로 표기해 부여
• JS 문법을 사용할 땐 {}로 감싸진 영역에서만 사용
• Rect element(컴포넌트)를 작성할 땐 대문자로 시작(파스칼 표기법)
• 조건부 랜더링은 삼항연산자를 사용 (표현식이기 때문에)
• map을 사용할 때는 'key' JSX 속성을 사용해야 하며 key는 고유한 값으로 부여해야 함

Create React App

• 간편하게 React 프로젝트(SPA)를 시작할 수 있게 해주는 CLI 도구(툴 체인)
• npx create-react-app 이름 명령을 통해 사용

실습 의사코드

• 라이브러리, 데이터, 파일 가져오기

  • import를 통해 React 객체 받아오기
  • App.css, global-style.css, static 폴더 안에 있는 더미데이터.js에서 더미데이터 배열 가져오기

• Siderbar 컴포넌트 생성

  • 클래스 속성에 'siderbar'가 부여된 색션 태그 생성
  • 아이콘을 담은 i 태그와 'far fa-comment-dots'를 속성에 부여해 해당하는 아이콘 가져오기

• Counter 컴포넌트 생성

  • -tweetForm__input 클래스 div가 부모 tweetForm__inputWrapper클래스 div 자식인 요소 생성
  • tweetForm__inputWrapper클래스 div안에 tweetForm__count을 클래스로 가지며 더미데이터의 길이를 출력해주는 div 생성

• Footer 컴포넌트 생성

  • 로고 이미지를 담은 img와 footer태그를 자식요소로 가지는 div 생성

• Tweets 컴포넌트 생성

  • 더미데이터를 사용해 생성한 요소들을 담을 tweets 클래스의 div 생성
  • map을 사용해 더미데이터의 요소(tweet)를(객체) 순차적으로 불러오고 활용해 아래의 요소들을 생성함↓↓↓
  • tweet의 id 값을 key 속성 값으로 tweet을 클래스 값으로 가지는 li 생성
  • img태그를 생성하고 tweet의 picture값을 가져와 src에 부여해 프로필을 담는 요소 생성
  • 이름이 parkhacker인 경우 배경색을 연보라 색으로 지정하기 위해 tweet__username와 tweet__username--purple 을 클래스 이름으로 가지는 span요소를 생성하고 아닐 경우 tweet__username 클래스만을 속성으로하는 span요소 생성
  • 클래스 값을 tweet__createdAt으로 가지는 트윗 생성 시간 정보를 담는 span 요소 생성
  • 클래스 값을 tweet__message으로 가지는 트윗 메시지 정보를 담는 span 요소 생성

• Features 컴포넌트 생성

  • 만들었던 특징들(Counter, Tweets, Footer)을 담은 컴포넌트 생성
  • Counter는 tweetFor__container의 후손 요소로 담기도록 위치
  • tweetFor__container요소에 이어 append 처럼 위치하도록 Tweets, Footer 위치

• App

  • 최종적으로 Sidebar 컴포넌트와 Features 컴포넌트가 main 의 자식 요소로 위치

후기

• 처음 다뤄 보는 React라 어려움이 있었음
• React를 다루는 과정에서 이전 유닛에서 배웠던 내장 매소드, 구조분해, 표현식등을 활용해 구현하여 이전 개념을 탄탄히 하고 추가로 새로운 것을 배울 수 있는 시간이었음
• 슬슬 새롭게 다루는 양이 많이 힘들지만 다 이해할 수 있도록 더 공부하고 활용해야함