#02.TIL | React(State 데이터변경, Component, Map)

Seongjae Hwang·2021년 10월 24일
0

State 데이터 변경

State안에 있는 데이터는 변수처럼 쉽게 수정되지 않았다..

예를 들어, 좋아요 이모지와 좋아요수가 표현되는 것을 구현한다면, 수정이 자주 일어나는 좋아요수를 State로 지정하여 다음과 같이 표현할 수 있다.

function App(){
  
  let [ 좋아요, 좋아요변경 ] = useState(0);
  return (
      <h3> <span>👍</span> { 좋아요 } </h3>
  )
}

그러면 이모지를 클릭했을때마다 재랜더링 되지 않고 좋아요수가 +1씩 늘어나게 할려면 어떻게 해야 될까.

function App(){
  
  let [ 좋아요, 좋아요변경 ] = useState(0);
  return (
      <h3> <span onClick = {() => {좋아요 + 1}}>👍</span> { 좋아요 } </h3>
  )
}

나는 처음에 위와 같이 onClick을 하면 State로 지정한 좋아요가 1씩 늘어나는줄 알았다. 그러나, 역시 아무 반응이 없었고 State는 변수와 다르게 데이터를 변경할때 지정된 변경함수(좋아요변경)를 써야된다는 것을 알게 되었다.(그래서 처음에 State를 지정할때 두개의 값이 들어가구나)
따라서 좋아요변경(99)라고 사용하면 좋아요의 State는 99로 변경된다. 좋아요변경 내의 소괄호 데이터가 좋아요를 완전히 대체하기 때문이다. 그러나 좋아요변경(좋아요 = '~~')처럼 State안에 있는 좋아요 자체 데이터를 바꿀수는 없다.

function App(){
  
  let [ 좋아요, 좋아요변경 ] = useState(0);
  return (
      <h3> <span onClick = {() => {좋아요변경(좋아요 + 1)}}>👍</span> { 좋아요 } </h3>
  )
}

그래서 정리하면 다음과 같이 좋아요변경 함수를 통해 좋아요 State 데이터를 재랜더링하지 않고 변경하여 표현할수 있게 되었다.

Component

Component는 긴 HTML코드 덩어리를 한 단어로 줄일 수 있는 문법이다. 지정하는 방법으로는

  1. function으로 함수를 만들고 (함수명의 첫글자는 대문자)
  2. 함수안 return 소괄호안에 HTML코드 작성
  3. 원하는 곳에서 <함수명></함수명> or <함수명 />

위와 같이 사용할 수 있다. 그러면 Component는 어떻게 활용할 수 있을까. 반복해서 사용하거나 내용이 자주 바뀔것 같은 HTML코드를 Componet화 할 수 있고, 협업을 위해 작업을 분배하거나 다른 페이지를 작성하고 싶을때 그 페이지의 HTML내용을 Componet화 할 수 있다는 것을 알게 되었다.
단점으로는 function App(){}안에 지정된 State를 사용하고 싶을때 사용할 수 없다는 것이다. 이때는 Props라는 문법을 통해 State를 Component로 전달할 수 있다고 하는데, 이는 더 학습해봐야겠다.

Map

Map은 중괄호안에 Array에 붙여 반복문처럼 사용할 수 있는 일종의 내장함수이다.(중괄호 안에서 for문 반복문은 사용 못함.) 우선 JavaScript에서의 사용법은

let Arr = [1, 2, 3];
let newArr = Arr.map(function(a){
  return( a * 10)
});

--> newArr = [10, 20, 30]

위처럼 사용할 수 있으며, Map 소괄호 안에 콜백함수를 넣는다. 콜백함수의 소괄호 안에는 Parameter가 들어가도 되고 안들어 가도 된다. 이렇게 Array의 자료형을 변경시켜 새로운 Array를 만들때 사용할 수 있다.

그러면 리액트에서는 이 Map을 가지고 어떻게 반복문처럼 활용할 수 있을까. 예를 들어 3개의 데이터가 들어있는 State에다가 Map을 붙이면 그 데이터의 수만큼 반복문을 가질 수 있으며, 반복을 원하는 HTML코드를 return안에 넣으면 기존보다 적은 코드로 HTML을 반복 생성가능하게 한다.
일반 for 반복문을 통해서도 따로 함수를 만들고 데이터바인딩을 하면 사용가능하다는 것도 알게 되었는데 Map을 이용하는 방식이 훨씬 간편하게 덜 복잡해 보였다.

profile
Always Awake

0개의 댓글