TIL #9 React

TIL 적는 방식을 조금 변경하기로 했다. 이전의 방식은 사실 정리하기도 애매한 방식이고 나에게도 남는 것이 많지 않을 것 같아서
하루의 마무리에 블로그 정리하는 시간을 정해놓고 작성하려고 한다.

 

React

리액트는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리이다.

 

웹페이지의 규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상하고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장했다.

 

프런트 엔드에서 사용되는 프레임워크(라이브러리)는 크게 3가지가 있다.

React, Vue, Angular 이 세 가지 프레임워크에 대해 묘사한 재밌는 글이 있어서 공유하려 한다.

 

medium.com/sjk5766/angular-vs-react-vs-vue-72046f6748b8

Angular vs React vs Vue

Angular는 모든 것이 준비된 주방으로 우리의 Web App에 필요한 모든 tools와 재료들을 가지고 있다. 만약 수많은 개발자들이 일하는 거대한 회사라면, 나는 모든 개발자들이 동일한 패턴으로 일을 하는 Angular를 좋아한다.

React는 oven (오븐)이다. 케이크를 굽는 과정에서 분명히 추가적인 tools가 필요하지만 이것은 필요한 것을 만드는 과정에서 tools를 선택하는 유연함을 줄 수 있다. 내가 기술적인 회사에서 능력 있는 몇몇 senior 개발자들과 함께 일을 하고 있다면 React는 좋은 선택이다.

Vue는 쉽고 효율적인 방법으로 요리를 정말 빠르게 만들 수 있다. 만약 startup 회사에서 새로 생긴 팀에서 엄격한 deadline을 가지고 있다면 나는 VueJS를 좋아할 것이다.

리액트는 위의 두 프레임워크와는 달리 MVC패턴 중 View의 기능만 담당한다.

MVC패턴은 소프트웨어 디자인 패턴 중 하나로 Model, View, Controller의 약자이다.

Model : 애플리케이션의 정보, 데이터를 나타낸다.
View : 사용자 인터페이스 요소를 나타낸다.
Controller : 데이터와 사용자 인터페이스 요소를 잇는 다리 역할

 

 

출처 : https://m.blog.naver.com/jhc9639/220967034588

 

 

리액트는 가상 돔(Virtual DOM)을 사용하는데, 이러한 가상 돔의 장점은 불필요한 자원의 사용을 최소화해 변경된 UI의 업데이트가 자동으로 빠르게 이루어진다는 것이다.

---

reacrt  작업 환경

위에서 말했듯이 리액트는 MVC 모델 중 View만을 담당한다. 

그만큼 내장된 기능이 부족하기 때문에 third-party 라이브러리를 함께 사용하게 된다.

이러한 third-party 라이브러리를 사용하기 위해 Node.js와 npm이 필요하다.

 

리액트로 개발하기 위한 개발환경을 위해 구축해야 하는 데에 어려움을 겪는 사람들을 위해 react 개발팀에서는 CRA(create-react-app)을 제공한다.

 

CRA에는 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있기 때문에 명령어 한 줄로 리액트 개발환경을 손쉽게 구축할 수 있다.

npx react-create-app 프로젝트명

---

Component, JSX

 

리액트의 모든 것은 Component로 이루어져 있다.

Component란 재활용 가능한 UI 구성단위를 뜻한다.

 

Component의 특징

• 재활용하여 사용할 수 있다. (한 번이라도 다시 사용된다면 Component로 만들자!!)
• 코드 유지보수와 구성 파악에 용이하다. (Component명을 통해 UI의 역할을 유추할 수 있다.)
• 컴포넌트에서 또 다른 컴포넌트를 포함할 수 있다.(부모-자식 관계)

Component는 Class Component와 Function Component 두 가지 방식으로 선언할 수 있다.

 

*Class Component에는 필수적으로 render함수가 호출되어야 한다!!

 

Component에서는 JSX(JavaScript Syntax Extension)라는 리액트에서만 사용되는 자바스크립트 확장 문법을 사용하는데 

JSX코드는 바벨(Babel)을 거쳐 일반 자바스크립트 코드로 컴파일된다.

 

리액트 공식문서 JSX설명

reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper

Introducing JSX – React

JSX 중요!

• 모든 태그가 content 없이 self closing 가능하다. (ex)<div />)
  (self로 닫던 아니던 클로징 태그는 필수!!)
• 항상 모든 요소를 감싸는 최상위 요소가 존재해야 한다.
  최상위 태그는 sibiling 태그로 존재할 수 없다.
• {} 안에 존재하는 코드는 javascript 코드로 해석된다.

---

html, css 파일을 react에서 component화 하기

import React from "react";
import "./Login.css";
import "../../styles/common.css";

class Login extends React.Component {
    render() {
        return (
            <div>
                <section className="login_container">
                    <h1 className="title">Westagram</h1>
                    <form className="contents">
                        <div className="id_box input_box">
                            <input
                                className="input_id"
                                type="email"
                                placeholder="전화번호, 사용자 이름 또는 이메일"
                            />
                        </div>
                        <div className="pw_box input_box">
                            <input
                                className="input_pw"
                                type="password"
                                placeholder="비밀번호"
                            />
                            <button className="show_pw" type="button">
                                비밀번호 표시
                            </button>
                        </div>
                        <button className="submit_btn" type="submit">
                            로그인
                        </button>
                        <a href="https://en.wikipedia.org/wiki/Help:Reset_password">
                            비밀번호를 잊으셨나요?
                        </a>
                    </form>
                </section>
            </div>
        );
    }
}

export default Login;

 

html, css, Js를 이용해 클론 한 위스타그램 코드 중 Login페이지에 대한 html 코드를 JSX문법을 적용해

Class component로 만들었다.

 

필요한 css 파일들을 import 해주었고, class component이기 때문에 render() 함수를 적어주었다.

(class component에서는 render함수 필수!!!!)

index.js파일에서 import 하기 위해 Login이라는 이름으로 export 시켜주었다.

 

html에서 class 이름은 태그 내에서 `class = "class이름"`으로 지정해 주었으나, JSX에서는 class대신 className 속성을 사용하므로 className으로 변경해 주었다.

 

(나도 찾아보고 알았지만 vscode에서 수정할 문자열을 선택하고

ctrl(맥은 command) + shift + L을 눌러주면 해당 문자열과 같은 문자열이 모두 동시에 선택된다. 굳굳!)