Section2 Unit4 [React] Intro

 

---

Section2 Unit4 [React] Intro

 

📌 Chapter1. React Intro

• React는 자바스크립트의 UI 라이브러리

• 리액트를 사용하면 UI를 보다 쉽게 구현할 수 있으며, 자바스크립트 문법을 그대로 사용하기 때문에 따로 공부할 문법들이 적다. 또한 현재까지 많은 사용자가 있기 때문에 참고할 레퍼런스가 많으며, 컴포넌트 기반으로 개발을 할 수 있기 때문에 재사용이 용이하게 코드 개발을 할 수 있다. 뿐만 아니라 리액트를 알고 있다면, React-Native를 통해 모바일 개발도 할 수 있다는 장점이 있다.

 

• React의 특징

  1. 컴포넌트 기반의 UI 라이브러리 (재사용가능)

  2. 선언형 프로그래밍

  3. 범용성

  4. Virtual DOM (가상돔)

 

 ↓ React에서 사용되는 JSX 문법을 정리해보았다. 

React 기본, JSX(JavaScript XML)와 JSX 문법 규칙 한번에 알아보기

 

📌 Chapter2. Create React App

• create-react-app으로 리액트 프로젝트를 생성할 수 있다. 

npx create-react-app

 

• 리액트로 Random word 출력하기

const word = ["고양이야옹", "댕댕이멍멍", "소는음메~", "오리꽥꽥", "참새짹짹"];

function getRandomIndex(length) {
  return parseInt(Math.random() * length)
}

function App() {
  return (
    <div className="App">
        <p>
          {word[getRandomIndex(word.length)]}
        </p>
    </div>
  );
}

 

⭐️ 과제. React Twittler Intro

 전체적으로 리액트를 다루는데 익숙해지기 위한 과제였다고 생각한다. 다음 유닛에서도 비슷한 과제가 있는 것 같았고, 어려운 부분은 없어서 따로 기록하지는 않아도 될 것 같다.

 create-react-app으로 리액트 프로젝트를 생성하고, 컴포넌트를 배치하고, 요구사항에 따라 내용을 보이게 하는 것이 목적이었다. 조건부 렌더링을 활용했고, 짤막하게 font awesome도 사용했다. 

 

 

🌱 오후 QnA 세션

 오후 QnA 세션에서도 많은 걸 배울 수 있었다. 이전까지는 노션에만 정리를 했었는데, 블로그에 정리를 한 번 해볼까.

• JSX

 리액트가 처음 나왔을 때는 jsx는 없었지만 편리함을 고려하여 페이스북에서 만들었다. jsx는 js로 작성하는 것보다 jsx는 코드량이 적고 편리하다. jsx는 그러한 이유로 생겨났기 때문에 브라우저에서는 읽지도 못하고 실행도 못한다. 반드시 js로 변환이 필요하다. 변환은 create-react-app에서 알아서 해준다..ㅎㅎ 이것까지 깊게 들어가면 복잡하다고..! 

• 컴포넌트

 컴포넌트는 평소에 웹페이지 화면을 보면서 나름대로 자기만의 확고한 기준을 가지고 컴포넌트로 분류해보는 연습을 하는게 좋다.

 회사마다 다르지만 재사용성을 위해서 최대한 쪼개는 것이 좋다.

• state 진도 전이지만, state에 관한 이야기

 state - 컴포넌트에서 사용하는 지역변수

 리액트 이전의 세상에서는 원본 데이터와 화면에 보여주기 위한 데이터가 분리가 되어 있었다.

 

- 원본데이터

- 화면에 표시할 데이터 (예를 들면 dom.textContent)

- 그래서 원본 데이터가 변경되면 dom에 접근해서 textContent나 value를 변경하는 식의 작업을 했다.

- 데이터 변경 → dom 변경 이 두가지가 기본작업인 시대였다.

 

이제 그걸 강력하게 지원해주는 리액트가 탄생했다.

• 그리고, Vite

 요즘에는 압도적으로 빌드속도가 빠른 Vite 많이 사용한다고 한다. vite는 svelte react vue 전부 셋업이 가능하다는 장점이 있다.

 안그래도 Vite, 최근에 몇 번 들은 적이 있어서 궁금했었는데 많이 사용하는 트렌드긴 한가보다!

---

🌙  오늘의 회고

 드디어 리액트에 들어갔다. 리액트 첫날이라 복습한다는 생각으로 무난하게 넘어갔다. 리액트가 무엇이고, 어떤 특징을 가지는지 리마인드 할 수 있는 시간이었다. 그리고 이전에는 따로 정리한 적 없이 마구 휘갈겨 놓았던 JSX 문법에 대해서도 정리를 좀 할 수 있었다. 새롭게 알게 된 점은 JSX는 Boolean, null, undefined를 렌더링하지 않는다는 것. 자바스크립트 고차함수랑 비동기에 대해 공부할 때랑은 전혀 다르게 너무 편-안…휴. 시간이 많이 남아서 다음 진도도 보고 이전에 어려웠던 부분들 복습도 해야겠다는 생각이 들었다. (나중이 무섭긴 하다……)

 그래도 오랜만에 여유있게 리액트에 관해 정리를 할 수 있어서 오늘은 머리를 조금은 식힐 수 있었던 것 같다.