[ React ] 리액트 다시보기.

Inevitable.Jason·2021년 3월 13일
React
0

react

목록 보기
1/1
post-thumbnail

INTRO.

React 를 사용해서 프로젝트를 경험해봤지만, 최상의 퍼포먼스를 내기위해, 확실하게 알고 넘어가지 않은 부분 + 복기하는 마음으로 글을 써본다.

그래서 어떻게 쓸건데?

table of content

  1. React?
  2. React를 사용하기 앞서.
    1.what's JSX & ES6?
    2. 함수형 component vs 클래스 component
    3. props의 특징과 규칙
    4. 상태 변경 방법
    5. 이벤트 처리 방법
    6. life cycle

1. React?

Why react?

프론트엔드 개발자가 되기로 마음먹고 공부하며 "React 라는 라이브러리가 유명하고 또 실무에서도 많이 쓰인다" 코딩을 배운지 얼마 되지않은 나로썬 이게 무엇이고 어떤 탄생 배경을 갖고있는지 궁금했다.

리액트의 간략한 탄생배경은 다음과 같다.

2006년 John Resig가 Jquery를 발표한 이후 프론트엔드 생태계를 사로잡았다. Jquery가 DOM을 다루는 방식은 지금까지도 가장 쉽고 효율적인 방식으로 인정받고 있으며, 오랜 세월동안 사실상의 표준으로써 군림해왔다.

그러다 SPA(Single Page Application)이 보다 구조화된 환경을 제시했는데 그에 따라, Backbone & AngularJs + Jquery (DOM 컨트롤)를 사용하는게 트렌드가 되었고, 이후 Facebook 에서 가볍고, 빠르게 배울수있는 Javascript library "React" 를 만들어냈다.

그래서 리액트를 사용해서 구현하는건 어떻게 다른건데?

리액트의 특징으로,

  1. Component: Component는 UI 를 구성하는 개별적인 뷰를 담당하는데, 개인적인 견해로는... 레고 블럭과도 같다. 많은 "블럭"(component)이 모여 하나의 큰 "성"(웹) 을 만든다. 또한 재사용성이 뛰어난건 또 하나의 장점.

  2. JSX문법: "JSX는 React를 위해 태어난 새로운 자바스크립트 문법으로, 과거 페이스북이 만들었던 PHP의 개량판 XHP에 그 기원을 두고 있습니다."

  3. Virtual DOM: 리액트의 가장 강력한 특징이 이부분이 라고들 얘기한다. Virtual DOM 이라는 가상의 DOM 에서 변화를 감지해, 무작정 DOM 에 새로운걸 넣는것이 아니라, 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다.Virtual DOM 을 사용함으로서, 데이터가 바뀌었을 때 더이상 어떻게 업데이트를 할 지를 고려하는게 아니라, 그냥 일단 바뀐 데이터로 그려놓고 비교를 한 다음, 바뀐 부분만 찾아서 바꿔주는것.
    React and the Virtual DOM 강의를 한번 보는걸 추천한다.

Virtual DOM 의 역할은 DOM의 변화를 최소화 하여 성능을 올려주는것.

자 이렇게 간략하게 React의 탄생배경과 특징 을 알아보았다.

2. React를 사용하기 앞서.

1. What's JSX? ES6?

JSX

  1. component에서 엘리멘트를 리턴할 때는 반드시 하나의 태그가 모든 엘리멘트를 감싸야 한다.

    const component = (): JSX.Element => {
	return (
    		<> // or <Fragment> or <anytag>
  			<div> hi there! </div>
    		</> // or </Fragment> or </anytag>
    	   )
	};

  2. component 내에서 javascript 표현식은 '{}' 안에 표현해야한다.

    const component = (): JSX.Element => {
	return (
    		<> 
  			<div> {Javascript} </div>
    		</> 
    	   )
};

  3. JSX 내부에서 if문을 사용하지 못하기 때문에, 삼항 연산자를 대신 사용한다.

    const getFee(isMember) {
  return (
  	<>
  		{isMember ? <div>'$2.00'</div> : <div>'$10.00'</div>}
  	</>
  );
}

  4. Tag 엘리멘트의 class를 지정할때 class가 아니라, className을 사용한다.

    const component = (): JSX.Element => {
	return (
    		<> 
  			<div className='JSX' > {Javascript} </div>
    		</> 
    	       )
};


ES6

  1. Destructuring (구조분해할당)

    let sth = {lastName : '박',
		   firstName : '정환',
           age: 30,
           };
let {lastName, firstName, age} = sth;

  2. Spread Operator

    let parts = ['shoulders', 'knees'];
 let lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

  3. Rest Parameter

    function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

  4. Default Parameter

    function greet(name, greeting, message = greeting + ' ' + name) {
  return [name, greeting, message]
}
greet('David', 'Hi')                      // ["David", "Hi", "HiDavid"]
greet('David', 'Hi', 'Happy Birthday!')   // ["David", "Hi", "Happy Birthday!"]

  5. Template Literals

    var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

  6. Arrow Function

    const Func = () => {   // == function () {}
	return 'hi'
}

  7. For of loop (반복가능한 객체 Array, Map, Set, String, TypedArray, arguments)

    const array1 = ['a', 'b', 'c'];
for (const element of array1) {
  console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"


2. 함수형 component vs 클래스 component

함수형

function foo(){
  let name = '박정환'
  let knownAs = 'as a font-end Nerd'
  return (
    	<div>
    		<div> {name}, {knownAs} </div>
    	</div>
  	)
};

클래스형

class foo () {
  constructor(){
    this.name = '박정환'
    this.knownAs = 'as a font-end Nerd'
  }
  render() {
    return (
      <div>
      	<div> {name}, {knownAs} </div>
      </div>
    )
  }
};

3. props의 특징과 규칙

const Memo () => {
	let message = '블로그쓰기!'
	return (
    		<Table message={message} />
    )
}
const Table = ({message}) => {
	return (
    	<>
        	<div> 오늘 할일 : {message} </div>
        </>
    ) 
}
// Memo 에서 Table로 props 넘겨주기.

4. 상태 변경 방법

import React, {useState, useEffect} from 'react'
const MovieList = () => {
    const [movie, setMovie] = useState(['아이언맨','어벤져스','헐크'])
    useEffect(() => {
        setMovie(['타이타닉','아바타',])
      }, []);
    return (
        <div>
            {movie.map((el, index) => {
                return(
                    <div key={index}> {el} </div>
                )}
                )}
        </div>
    );
}
export default MovieList;

이전에는 setState 로 state를 변경해주었는데,
React 16.8 버전 이후로 Hook이 기본 탑재되어있어 활용성이 좋은 hook으로 대체한다.

5. 이벤트 처리 방법

기존의 DOM 을 사용할때 이벤트 처리방법은 onclick, onchange, onmouseover, onmouseout 등등이 있었는데, React에서는 camelCase로 표현해야한다

onclick => onClick
onchange => onChange
등등...

6. Life Cycle

Life Cycle?

생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. 이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

  1. Mount: 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현합니다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장합니다. 그 후에 componentWillMount 메소드를 호출합니다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됩니다.

  2. PropsUpdate: props가 업데이트될 때의 과정입니다. 업데이트되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메소드가 호출됩니다. 그 후 shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 후, 업데이트가 완료(render)되면 componentDidUpdate가 됩니다. 이 메소드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있습니다. componentDidUpdate만 이미 업데이트되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있습니다.

  3. State Update: setState 호출을 통해 state가 업데이트될 때의 과정입니다. props update와 과정이 같지만, componentWillReceiveProps 메소드는 호출되지 않습니다. 그리고 메소드의 두 번째 인자로는 바뀔 state에 대한 정보를 가지고 있습니다. componentDidUpdate는 두 번째 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있습니다.

  4. Unmount: 컴포넌트가 제거되는 것은 Unmount라고 표현합니다. 더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있습니다. componentWillUnmount가 그것입니다. componentDidUnmount는 없습니다. componentWillMount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 합니다.



Hook 에서의 생명주기 (useEffect)

"리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다."

공식문서에서의 useEffect에 대한 간략한 설명이다.

마치며.

React를 사용해서 프로젝트를 해보았으나, 다시한번 여유를갖고 react부터 hook redux 를 다시 공부 해보니까, 제대로 알고 한 프로젝트가 아니라 주먹구구 만들었구나 생각이든다.

블로그랑 친숙해지기 위해 이것저것 써보고있는데 퀄리티있는 내용을 갖다 쓰기엔 너무나 시간이 오래걸리는것같아 다소 미숙한 부분이 많다ㅠ 쓰다보면 잘 쓰게되겠지....!?

profile
Inevitable.Jason
Who wanna be a programming nerd.

0개의 댓글