[TIL]201005 Twittler React

Chaegyeom·2020년 10월 9일

Coding TIL

TIL

목록 보기

46/77

React?

웹사이트를 만드는 방법에는

html과 css를 적용해서 만드는 방법
react, vue와 같은 프론트엔드 라이브러리를 사용하는 방법이 있다

요즘 웹페이지는 단순히 데이터만을 보여주는게 아니라 유저와 수많은 interaction이 일어난다 이렇게 많은 interaction이 일어나려면 수많은 상태관리가 필요하다

예를 들면 배경 이미지를 바꾸는 버튼을 눌렀을 때를 생각해 본다면

먼저 바꿀 이미지의 DOM을 찾고, 이미지의 DOM소스를 바꿀 이미지로 바꿔준 후에 바뀐 이미지를 화면에 다시 띄워주는 과정이 필요하다

이렇게 버튼 하나를 눌렀을 때도 많은 상태를 관리해야 한다. 사용자와interaction이 많지 않다면 html과 css만으로도 충분하지만 interaction이 늘어날 수록(관리해야할 DOM이 많아질 수록) 이것들을 관리하기는 어렵다

그래서 사람들은 귀찮고 복잡한 DOM관리와 상태값 관리를 최소화 해주고 오직 기능개발에만 집중할 수 있는 방법을 고민했고 그렇게 해서 지금의 프론트엔드 라이브러리, 프레임워크가 만들어졌다 대표적으로 리액트,뷰,앨귤러와 같은 라이브러리 또는 프레임워크가 있다

리액트는 컴포넌트에 집중한 프론트엔드 라이브러리이다 컴포넌트라 하나의 의미를 가진 독립적인 단위모듈로 쉽게말해서 나만의 html태그라고 생각할 수 있다. 예를 들어 예전에 제작했던 트위틀러에서 트윗을 표시하기 위해서는 아래와 같은 html태그가 필요하다

< div class="tweet" >
    <span class="userId"> @walli </span>
    <div class="contants"> hello, my name is walli :) </div>
    <div class="time"> 43 seconds ago </div>
</div>

이것을 다음과 같이 쓴다면 어떨까?

<Tweet userId="walli" time="43">
    hello, my name is walli:)
</Tweet>

Tweet이라는 태그는 원래 없지만 하지만 이렇게 하나의 의미를 가진 태그를 만들어 사용할 수 있다면 코드가 직관적이고 재사용성도 높아질 것이다. 이것을 컴포넌트 라고 한다. 그리고 리액트에서는 컴포넌트단위로 개발을 진행한다

ES6 & JSX

리액트를 시작하기 전에 알아야할 것들

ES6

import React, { Component } from 'react'

class StartReact extends Component {

    constructor(props){
        super(props)
        
        this.state = { ... }
    }

    someMethod(){
        ...
        const { val_1, val_2 } = this.props;
        ...
    }

    render(){
        return (
            <div>
                <h1> hello, React </h1>
            </div>
        )
    }

}

위 코드에서 보이는 것과 같이 리액트는 기본적으로 ES6를 사용한다 따라서 ES6에 익숙해야 한다

다음 7가지 개념은 반드시 알고 있어야 한다

Destructuring
spread operator
rest parameters
default parameters
template literals
arrow function
for-of loop

JSX

JSX는 작성한 리액트 컴포넌트를 화면에 보여주기 위해 사용한다 리액트 컴포넌트에서는 JSX를 리턴해줘야 한다

JSX는 얼핏보면 html처럼 보일 수 있지만 자바스크립트의 확장문법이다

JSX를 사용하지 않고 리액트 컴포넌트를 화면에 보여주기 위해서는 다음과 같이 작성해야 한다

React.createElements('header', { className: 'App-container' } ... );
React.createElements('p', { className: 'body' ... );

태그를 쓸 때 마다 이렇게 사용하려면 가독성도 떨어지고 코드도 복잡해 질것이다

하지만 JSX를 사용하면 다음과 같이 간단하게 태그를 작성 할 수 있다

< header className = 'App-container' > ... </header>
<p> ... </p>

JSX문법을 사용해서 작성하면 바벨이 JSX를 위와 같은 코드로 변환해 준다

하지만 주의해야 할 점이 있는데 JSX는 자바스크립트 코드로 변환되어야 하기 때문에 몇가지 규칙을 지켜서 사용해야한다

규칙

반드시 하나의 엘리먼트로 모든 엘리먼트가 감싸져 있어야 한다

JSX에서 내부에 자바스크립트 코드를 작성할 수 있는데 자바스크립트 코드를 작성할 때는 중괄호({})안에서 작성해야 한다

JSX내부에서는 if문을 사용할 수 없다. 따라서 조건부 렌더링을 사용하기 위해서는 삼항연산자나 IIFE를 사용해야 한다.

엘리먼트의 클래스 이름을 적용할 때는 class가아닌 className키워드를 사용해야 한다 ES6문법중에 class키워드가 있기 때문에 className키워드를 사용한다.

JSX 문법을 도입하게 된 이유?

선언형이고 직관적이라는 장점이 있다. JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다
JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다

html은 선언형이고 javascript는 명령형인데 글로만 보면 와닿지 않으므로 예시를 들어보자면

html로 이렇게 작성할 것을 javascript로 작성하려고 하면

이렇게 작성 할 수 있다. 같은 화면을 띄우는데 이렇게 코드가 길어지만 '그냥 하드코딩으로 하는게 낫지 않을까?'라는 생각이 들기도 한다.

Twittler React

리액트 공식문서와 강의를 통해 리액트에 대해서 배운 후 pre코스 때 했었던 twittler를 리액트를 통해서 만드는 스프린트를 진행했다.

하루밖에 시간이 없어서 css는 많이 건드리지 못하고 우선 내용을 띄우는 것에만 집중했다.
아직 리액트에 익숙하지 않아 이벤트를 설정하는 것과 컴포넌트 단위로 쪼개서 기능을 구현한 후 하나로 합치는 것에 대해서 많이 어렵지만 이전에 자바스크립트로 하는 것 보다는 훨--씬 직관적으로 보여진다!!