내일배움캠프 React트랙 25일차 회고 (2022.12.05)

What's React?

"A Javascript library for building user interface by facebook(2013)"

리액트는 웹브라우저뿐 아니라, React Natve를 통한 앱어플리케이션, Electron과의 조합으로 데스크탑어플리케이션까지 빌딩할 수 있다.

리액트는 SPA(Single Page Application), CSR(Client Side Rendering)과 연관성이 많은 라이브러리이다.

또한 Gatsby, NEXT와 리액트를 함께 사용하면 SSG(Static-Site-Generation) , SSR(Server-Side-Rendering)도 구현할 수 있다.

---

Frmaworks VS libraries

Frmaworks: UI, Routing, HTTP Clients, State management등 모든 것들이 갖추어진 것이다. 모든 것들이 갖춰진 대신 그 모든것을 알아야하기에 진입장벽이 높고, 정해진 것 내에서만 해야되기때문에 자유도가 떨어지는 단점이 있다. 웹개발을 위한 프레임워크는 대표적으로 Angular, Vue등이 있다.

 

libraries: UI, Routing, HTTP Clients, State management중 특정한 한가지의 문제를 해결하기위한 것이다. 대표적으로 React는

UI만을 해결하기위해 탄생했지만, 강력한 커뮤니티집단에 의해 사용할 것이 많이 추가되어있는 편이다.

---

React의 철학

 

React is Renders Ul and responds to events: UI를 보여주고, event에 반응하는 라이브러리

리액트는 컴포넌트단위의 집합으로 바라보는 것이 적절하다.

React is a set of highly cohesive building block in which Uls is loosely coupled to other components.

좋은 Component란 다른 Component와 연결되어있지않고 독립적이야 하며, 재사용성이 높아야한다.

 

그렇다면 어떤 단위로 컴포넌트를 구축해나갈까?

DRY: Don't Repeat yourself 스스로 작성하지말고 재사용할것. -> 재사용가능성을 기준으로

SR:Single Responsibility 단일책임으로 작성할 것 -> 한 컴포넌트내에서 복잡한 기능을 구현하려 하기보다 더 분리하려 노력할 것

 

React코드의 구조

데이터(내부상태를 나타내는 state, 외부로부터 전달받은 상태를 나타내는 props)를 나타내는 reder가 있다.

상태가 변경될때마다 re-render된다.

virtual DOM Tree와 previous tree를 비교해 실제로 변경된 부분만 화면에 업데이트된다. 그래서 빠르게 반응한다.

---

Hooks

React는 2019년 함수형 컴포넌트(Hooks)는 클래스단위로 컴포넌트들을 만들었던 시기 this 바인딩 이슈, 로직의 재사용 불편함때문에 탄생했다. Hooks는 함수단위로 컴포넌트를 만들 수 있다.

React Hooks: Hooks are function that let you "hook into" React state and lifecycle feature form function component

Hooks(리액트의 함수들은)는 값의 재사용이 아니라 로직의 재사용을 위한것이다.

---

JSX 문법

1. React에서 컴포넌트는 함수로 만들 수 있다.
2. 함수네임의 맨첫글자는 대문자로 해줘야함
3.  component는 return()안에 작성하는데 이때 JSX문법을 사용해야한다.
4. JSX문법
   • React에서 컴포넌트를 반환할때에는 하나의 태그만 반환해야한다. 다수의 태그를 반환하고싶다면 <>, <div>, <Fragment>등 부모태그에 다수의 태그를 상속시키는식으로 작성해야한다.
   • class를 사용하고싶다면, class대신에 className을 사용해야한다.
   • 컴포넌트범위내에 자바스크립트문법을 작성하고싶다면 중괄호{}안에 작성할 것 
     (아래코드에서는 name, style값, list.map등이 이에 해당함)

function App() {
  const name = "inguk";
  const list = ["우유", "딸기", "바나나". '요거트'];
  return (
    <Fragment>
      <h1 className="orange">{`Hello! ${name}아!`}</h1>
      <h2>Hello!</h2>
      <p>{name}</p>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <img
        style={{ width: "200px", height: "200px" }}
        // 얘 style에 객체넣은거임. width라는 key에 200px라는 value가 있는거임.
        src="https://images.unsplash.com/photo-1669926504091-2735b6cb51a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60"
        alt="디저트"
      ></img>
    </Fragment>
  );
}

 

HTML코드를 JSX로 변환해주는 유용한 사이트

 

https://transform.tools/html-to-jsx

HTML to JSX