[SeSSAC] 웹 풀스택 영등포 5기 과정_REACT(1)

이번 시간에는 REACT를 배웠습니다! 

요즘 프론트에서 많이 언급되는 단어(?)라서 굉장히 궁금했었는데, 

이렇게 접해보니 반가웠습니다.

 

 

 

0. REACT란?

동적인 UI를 만들기 위해 2011년 페이스북에서 만든 오픈 소스 Js라이브러리 입니다.

 

(사실 프레임 워크인지 라이브러리인지는 논란이 많지만, React CLI라는 기능이 생기고 나서

 사용자 입장에서는 프레임워크처럼 쓰는 느낌이 강하고, React 측에서는 라이브러리로 정체성을 갖고 있는 느낌)

 

아무튼 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리라고 하네요!

 

이 REACT에는 5가지 특징이 있습니다.

---

(1) 단방향 data flow

(2) Component 기반의 구조

(3) Virtual Dom

(4) Props and State

(5) JSX

(이 중 단연 성능 특징 1위는 VDOM이 아닐까요?)

---

여담인데, 이러한 개발자 면접 썰도 있다고 합니다.

갑자기 떠오른 코딩면접얘기
나는 면접을 볼 때 선택의 이유 감상을 묻는다
지식이 아니라 경험치를 알아보기 쉬운 질문이니까. 제일 싫어하는 거 하나를 꼽자면 신입 면접을 보는데 왜 리액트를 도입했냐고 물었을 때 Virtual DOM을 써서 성능이 좋다는 답변이다.만약 실제로 벤치마크를 돌려서 리액트가 성능이 제일 좋으니 이걸로 하기로 했다고 하면 얼추 이해는 되겠지만 (그 경우 다른 질문을 할 거다), 그런 게 아니고서야 신입이 실제로 VDOM을 통한 성능 향상을 얼마나 경험해 봤고 그게 선택에 영향을 끼칠 수 있을까. 진짜 VDOM을 안 써서 생긴 문제를 리액트 도입으로 해결했다는 답변을 들으면 당장 채용할지도 몰라 그러지 않고서야 그냥 공부한 답변/외운 답변이라고 밖에 이해할 수 없다 프런트 거의 안 해본 사람으로서 보는 React는 성능이 장점이 아니라
1. 자료가 널림
2. 컴포넌트 기반이라 기존 UI 프레임워크와 통하는 부분들이 있음 (비 웹 쪽에서 넘어오기 편함)
3. 그리고 그렇게 남들이 만들어 놓은 컴포넌트가 널림

https://twitter.com/yechanism_/status/1462089609328742407

 

그리고 node.js에 React를 사용하기 쉽게 NPM이 내장되어 있어서

이 NPM을 이용하면 React를 쉽게 설치하고 관리하는 것이 가능하다고 하네요!

---

1. REACT 프로젝트 생성하기

 

리액트 앱(프로젝트) 이름 규칙에는 두 가지가 있습니다.

(1) 대문자 사용 불가능

(2) 단어 여러 개 사용 시 하이픈(-) 기호로 구분

 

그리고 NPM보다 가벼운 패키지인 NPX를 사용합니다.

따라서 하기와 같은 명령어를 입력하면 React를 이제 누구나 만들어서 사용할 수 있습니다.

 

리액트 실행 명령어

npx create-react-app "APP NAME"

 

 

 

---

2. JSX 이해하기

JSX는 JavaScript + XML을 합친 말입니다.

자바스크립트의 확장 문법으로  XML과 유사하며, 바벨(자바스크립트 컴파일러)을 이용해

일반 자바스크립트 코드로 변환을 해줍니다.

 

이 예제는 단순히 현재 시간을 알려주는 함수입니다.

여기에 JSX가 쓰였는데요, 여기서 몇 가지 특징을 알 수 있습니다.

(1) 이 함수가 보여줄 HTML은 return에 넣어야 합니다. 

보시면 return( ) 괄호 사이에 div와 h1 등 필요한 html태그가 전부 들어가 있습니다.

 

(2) 이 return 값 안에 있는 html코드들은 반드시 하나의 부모 태그가 전체 요소를 감싸야합니다.

위에 예제에서는 <div></div> 요소가 <h1> 태그를 감싼 형태입니다.

 

(3) 중간에 js 문법을 사용하고 싶을 경우 중괄호 { }로 감싸줘야 합니다.

현재 시간은 옆에 { new Date(). toLocaleTimeString() } 도 중괄호로 감싸져 있습니다.

 

(4) JSX에서는 삼항 연산자가 사용 가능/ if문과 반복문 사용 불가

만약 for문과 if문을 사용하고 싶다면 return ( ) 전에 JSX 지역에서 벗어나서 사용해야합니다.

 

(5) 인라인 style 적용 시 css 속성은 camelCase 사용

상기 예제처럼 JSX영역에서 바로 인라인 style을 줄 때는 background-color가 아닌,

backgroundColor라고 명시를 해주고 값들에도 다 '  '를 붙여주어야 합니다.

 

(6) class 대신 className, onclick 대신 onClick 사용

 

태그에 css를 걸 때나 값을 도출할 때 class를 사용하였는데, JSX에서는 className으로 사용하며,

이벤트는 onclick이 아닌 onClick처럼 camelCase로 사용합니다.

 

 

---

3. Component 이해하기

Component는 React의 꽃이라고 불리는 핵심 기능입니다.

다들 알고 계실 테지만, Component는 코드에서 하는 기능을

작은 단위로 쪼개어 재사용이나,  분리가 가능하도록 만든 코드 덩어리입니다.

 

React에서 컴포넌트 종류는 두 가지가 있습니다.

첫 번째, 클래스형 컴포넌트
두 번째, 함수형 컴포넌트

 

 ++ 그리고 이 컴포넌트는 대문자로 이름이 시작해야 합니다

 

(1) 클래스형 컴포넌트

이 클래스형 컴포넌트를 뜯어서 보도록 하겠습니다.

 

import React, { Component } from 'react'

이 코드는 React객체와 Component 클래스를 가져와서 이 파일에서 사용하고 생성할 수 있도록 불러온 것입니다.

class ClassComponent extends Component

위에서 불러온 Component 클래스를 활용하여 새로운 class인 ClassComponent를 자식으로 생성하였습니다.

    render() {
        const {name} = this.props;
        return (
            <div>
            {/* 클래스는 this를 넣어서 사용해야한다 */}
                <h1>Hi! {this.student}!</h1>
                <p>여기는 FunctionComponent</p>
                <p>새로운 컴포넌트의 이름은 <b>{name}</b></p>
            </div>
        )
    }

그리고 class형 컴포넌트에는 render 함수가 필수입니다.

 

그래서 render 함수를 불러와주고, 각각의 값을 가져온 다음,

return안에 JSX를 통해 컴포넌트의 UI를 지정해주고 있습니다.

 

함수 예제 안에서 props가 갑자기 등장해서 뭐지? 싶으셨을 텐데요,

props는 properties를 줄인 말로 컴포넌트의 속성을 설정할 때 사용하는 요소입니다.

props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하게 되고, 

이 점이 아까 나왔던 React의 특징, 단방향 데이터 플로어입니다.

부모가 데이터를 전달하게 되면, [  props.변수값  ]의 형태 통해 자식 컴포넌트에서 사용할 수 있습니다.

 

npx를 설치했을 때 생긴 파일 중  App.js를 보면,

각각의 src 파일들이 export 해서 내보낸 각각의 컴포넌트들을 import 하고 있습니다.

이 파일에 귀결되어서 사용되고, 이 파일을 통해 프론트로 보이게 되는 것입니다.

보시면 위에서 다양한 파일을 통해 컴포넌트들을 import 받고 function App()에서 활용하고 있습니다.

이 function App()이 다양한 컴포넌트들의 부모 컴포넌트가 되는 것이고,

여기서 태그 안에 name, food, price, author 등 여러 props를 전달하고 있습니다.

당연히 이 props는 단순한 string, integer, object, function 등 다양한 형태를 전달할 수 있습니다.

 

여기서 세 번째 컴포넌트로 보내고 있는 <Button> Google </Button> 이 구문에 이 태그 열림과 닫힘 사이에 있는 

Google이 자식 컴포넌트에서 사용할 수 있는 children 내역입니다.

자식에서 활용하는 모습

 

---

(2) 함수형 컴포넌트

함수형 컴포넌트는 말 그대로 함수로 내보내는 방식입니다. 클래스 컴포넌트보다는 

메모리 자원을 아낄 수 있는 이점이 있고 조금 더 가볍다고 합니다.

 

마찬가지로 props를 받아서 안에서 사용을 하고 있으며, return ( )  안에 함수가 나타내고자 하는

UI를 JSX를 통해 나타내고 있습니다!

 

함수는 클래스와 다르게 render() 함수가 필요하지 않아 조금 더 단순해 보입니다.

 

 

수업시간에 더 한 내용이 많지만, 굵은 흐름 중심으로 정리하였습니다.

얼른얼른 React를 프로젝트에서도 활용하여 손에 익어, React Native까지 하는 날이 오기를,,,,!