React start

arrrrrr·2023년 1월 23일

React 공부중 🎽

목록 보기

5/16

오늘은 연휴가 끝난 뒤 본격적으로 시작될 React를 예습했다.
전체적인 구조는 이해되었고 props, router 등은 감만 잡혔다.
공식문서는 이번 기회에 처음으로 제대로 읽는 것 같은데 의외로 재밌는걸 🤓

학습자료
MDN Getting started with React
React Introducing JSX

학습 내용

✓ React를 비롯한 프레임워크를 사용하는 이유는?

변하는 환경에서 수정의 늪에 빠지지 않기 위해서이다. 여기에 가장 많이 기여하는 react 특성이 컴포넌트다. ui가 변경되어도 html을 뜯어고치는 과정 없이 조립만 다시하면 되니까!

✓ 컴포넌트별 파일관리

리액트에서는 컴포넌트별로 파일을 별도로 관리하는 것이 보편적이다. 이로인해 개발자는 특정 기능을 변경하기 위해서 어느 것을 수정해야하는지 명확하게 알 수 있다.

파일구조
/ 
├── /Twittler React SPA
│   ├── README.md
│   ├── /public                        # create-react-app이 만들어낸 파일, yarn/npm start로 실행할 시에 쓰입니다
│   └── /src                           # React 컴포넌트가 들어가는 폴더
│        ├── static                    # dummyData가 들어가는 폴더
│        │    └── dummyData.js
│        ├── Pages                     # 페이지를 표시하는 컴포넌트가 들어가는 폴더
│        │    ├── About.css
│        │    ├── About.js
│        │    ├── MyPage.css
│        │    ├── MyPage.js
│        │    ├── Tweets.css
│        │    └── Tweets.js
│        ├── App.css
│        ├── App.js
│        ├── Footer.js
│        ├── index.js
│        └── Sidebar.js
├  package.json
└ .gitignore

✓ React의 render 구조

static/index.js에는 ReactDOM.render() 함수를 호출하며, 다음과 같은 두개의 인자를 받는다.

ReactDOM.render(<App />, document.getElementById('root'));

렌더링하기 원하는 컴포넌트. 여기서는 <App />
렌더링 되길 원하는 컴포넌트들이 포함된 DOM 요소. 여기서는 root라는 ID를 가진 요소

root는 public/index.html 파일의 <body> 내부에 <div id='root'> 요소에서 찾을 수 있다. 즉, App이 렌더링되면 div의 하위 요소로 작성한 태그들이 들어간다.

✓ return문의 의미

각 컴포넌트(함수)의 리턴문 안에는 html에 작성하고 싶은 태그들을 넣어주면 된다.

✓ 컴포넌트는 무조건 좋은가?

컴포넌트는 재사용성과 유지보수성이 높다. 하지만 컴포넌트 내부에 선언된 변수는 다른 컴포넌트가 사용할 수 없다. 따라서 컴포넌트를 만들 땐 이러한 점도 고려해야 한다.

✓ import, export

각 컴포넌트 파일을 보면 상단에 import문이 작성되어 있다. {중괄호}로 불러온 import문은 뭐지 했는데, export의 차이였다.
export를 defalt로 주면 React문처럼 import해오고,
export를 {dummyTweets} 형태로 주었으면 {dummyTweets}로 import한다.
from이 없는 import는 웹팩이다.

import React from 'react';
import { dummyTweets } from '../static/dummyData';
import './Tweets.css';

내일은 props, router 공부하고 과제도 미리 해봐야겠다. 그리고 학습중에 키워드는 바로 적어놔야겠다. (하루도 채 지나지 않았는데 많이 까먹은 것 같다.. 🥲)

arrrrrr

⛱

이전 포스트

[실습] How many coins I can buy

다음 포스트