안녕하세요. 여러분은 함수형 컴포넌트를 사용해 보신 적이 있으신가요?

그럴 때마다 상태관리를 어떻게 해야 할지 곤란하시죠. 함수형 컴포넌트에서는 상태를 관리할 수 있는 Hooks를 이용해야 합니다.

오늘은 React Hooks에 대해 알아보도록 하겠습니다!



UseState


가장 기본적인 Hook으로서, 함수형 컴포넌트에서 가변적인 상태를 유지할 수 있도록 해줍니다.
함수형 컴포넌트에서 상태를 관리해야 하는 일이 생기면 UseState를 사용하면 됩니다!

아래 예제를 보도록 하겠습니다.



 import React, { useState } from "react";

export default function App() {
  // "count"라는 새 상태 변수를 선언합니다
  const [countsetCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}


예제 코드1


위의 예제 코드를 한줄 한줄 해석해보도록 하겠습니다. 



  // "count"라는 새 상태 변수를 선언합니다
  const [countsetCount] = useState(0);

예제 코드2


이 문법이 헷갈리실 수도 있습니다. 이 문법은 구조 분해 할당 문법입니다.

여기로 가시면 구조 분해 할당에 대한 자세한 설명이 나와 있습니다.


이 함수의 파라미터에는 상태의 기본값을 넣어줍니다.
count에는 현재 useState(0)입니다. 즉, 기본값을 0으로 설정 한다는 뜻입니다.
이 함수가 호출되면 배열이 반환되는데, 첫 번째 원소는 상태 값 의미하고, 두 번째 원소는 상태를 설정하는 함수입니다.

이  두 번째, 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트를  리 렌더링이  됩니다 .




<p>You clicked {count} times</p> // 상태 값
<button onClick={() => setCount(count + 1)}>Click me</button> // 상태를 설정하는 함수

예제 코드3 (상태 값과, 상태를 설정하는 함수)


여러 State 변수 선언하기


function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [agesetAge] = useState(42);
  const [fruitsetFruit] = useState('banana');
  const [todossetTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

예제 코드3 (여러개의 useState)


useState 함수는 하나의 상태 값만 관리를 하므로 여러 개의 상태를 관리하기 위해서는 여러 개의 useState를 사용하시면 됩니다.


UseEffect


리엑트의 컴포넌트가 렌더링 될 때 특정 작업을 수행하도록 설정하는 Hook입니다.
클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnMount를 합친 형태라고 생각하셔도 됩니다. 


1. componentDidMount


  useEffect(() => {
    console.log("componentDidMount");
  }, []);

예제 코드4(componetDidMount)

useEffect에서 컴포넌트가 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우 혹은 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주시면 됩니다.

2. componentDidUpdate

  
  componentDidUpdate(prevPropsprevState) {
    if (prevProps.value !== this.props.value) {
      valueUpdate();  
    }
  }

예제 코드5(componentDidUpdate)

클래스형 컴포넌트에서는 아래의 코드처럼 작성해야합니다.


  useEffect(() => {
    console.log(count);
  }, [count]);

예제 코드6(componentDidUpdate)


useEffect에서 사용하는 방법은 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주시면 됩니다.



3. componentWillUnMount


useEffect(() => {
    console.log("effect");
    console.log(count);
    return () => {
      console.log("cleanup");
      console.log(count);
    };
  });

예제 코드7(componentWillUnMount)


컴포넌트가 UnMount 되기 전이나, Update 되기 전에 어떠한 작업을 수행하고 싶다면 useEffect에 cleanUp 함수를 반환해주면 됩니다.



.

.

.


이상으로 Hooks의 useState와 useEffect에 대해서 알아보았습니다.


다음 시간에는 커스텀 Hooks 만들어 보도록 하겠습니다.


감사합니다.


'공부' 카테고리의 다른 글

[JavaScript]-this,call,apply,bind  (0) 2019.12.05
ES5 vs ES6  (0) 2019.12.01
Promise, async, await  (0) 2019.11.28
Trello(트렐로) - 프로젝트 관리하기  (0) 2019.11.10
git stash  (0) 2019.11.03
Posted by AddChan
,

안녕하세요 오늘은 This, bind, apply, call에 대해서 알아보도록 하겠습니다.



1. This

 this의 값은 함수를 호출하는 방법에 의해서 결정됩니다.

아래 코드를 확인해 보도록 하겠습니다.

console.log(this.document === document); // true

console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37


전역 실행 컨텍스트(어떤 함수의 외부)에서는 this는 전역 객체를 나타냅니다. 따라서 이 context에서 this 키워드를 사용한다면 window  객체를 사용하겠다는 의미가 됩니다.


그럼 전역객체가 아니라 다른 객체를 의미할 경우는 어떤 경우일까요? 한 예를 보겠습니다


var o = { prop: 30 };

function _function() {
  return this.prop;
}

o.f = _function;

console.log(o.f()); // return 30


이 context에서 this 키워드가 가리키는 것은 객체 o가 됩니다. 함수 _function의 레퍼런스가 o 오브젝트의 f 프로퍼티에 저장이 되면서 _function객체를 통해서 호출이 되고 있는 상황이기 때문입니다.


아래의 예시를 몇개 더 보겠습니다.


var k = {
  name: "kim",
  first: 10,
  second: 20
};

var l = {
  name: "lee",
  first: 20,
  second: 20
};

function sum() {
  return this.first + this.second;
}

k.s = sum
l.s = sum;
console.log(k.s()); // return: 30
console.log(l.s()) // return: 40


k.s = sum을 하게 되면 


var k = {
  name: "kim",
  first: 10,
  second: 20,
  s: function() {
    return this.first + this.second;
  }
};


위의 예시 코드처럼 변하게 되어 console.log(k.s())를 하게 되면 30이 출력되는것을 확인하실수 있습니다.



2.Call 

var kim = { name: "kim"first: 10second: 20 };
var lee = { name: "lee"first: 10second: 10 };

function sum() {
  // this = kim
  return this.first + this.second;
}
// sum();
console.log(sum.call(kim)); // return 30


call 메소드는 다른 객체 대신 메소드를 호출하는데 사용됩니다. 이 메서드를 사용하여 함수의 this 객체를 원래 컨텍스트에서 kim으로 지정된 새객체로 변경할 수 있습니다.


3. apply

var kim = { name: "kim"first: 10second: 20 };
var lee = { name: "lee"first: 10second: 10 };

function sum() {
  // this = kim
  return this.first + this.second;
}
// sum();
console.log(sum.apply(null, [(first = 10), (second = 20)])); // return 30


call 메소드와 동일 하나, call 메소드는 인자 하나 하나를, apply는 인자 리스트를 전달합니다.


call과 apply의 차이점은

call 메소드와 동일 하나, call 메소드는 인자 하나 하나를, apply는 인자 리스트를 전달합니다.


4. Bind

var kim = { name: "kim"first: 10second: 20 };
var lee = { name: "lee"first: 10second: 10 };

function sum() {
  // this = kim
  return this.first + this.second;
}
var kimSum = sum.bind(kim);
console.log(kimSum());


this의 값을 바꿀 수 있는 bind입니다. bind를 사용하면 함수의 this 값을 영구히 바꿀 수 있습니다. update 메서드를 이리저리 옮기면서 호출할 때 this 값은 항상 고정 되게끔, call이나 apply, 다른 bind와 함께 호출하더라도 this 값이 고정 되도록 하려면 bind를 사용한다.




'공부' 카테고리의 다른 글

[React]-Hooks에 대해 알아보자  (1) 2019.12.08
ES5 vs ES6  (0) 2019.12.01
Promise, async, await  (0) 2019.11.28
Trello(트렐로) - 프로젝트 관리하기  (0) 2019.11.10
git stash  (0) 2019.11.03
Posted by AddChan
,