react.js & node.js 3일차 - React Rendering, Input, useState, filter, map, reduce

IIFE(Immediately Invoked Function Expression - 즉시실행함수)

React Rendering

위와같이 즉시실행함수를 사용했다. 하지만 이렇게 한다고 하더라도 number는 바뀌지 않는다. 왜일까? 이건 react가 평볌한 변수에 대해서는 render 해주지 않아서 그렇다. react가 render 해주는 변수들이 따로 존재한다.

useState

그래서 useState를 사용했다. 이렇게해서 리스트로 바환된것은 비구조화 할당으로 변수와, 변수값을 바꿀 수 있는 것이다. 그리고 useState 내부에는 초기값을 넣어준다.

그래도 가상돔(virtualDOM)이 변화된 부분만 바꾸어주기 때문에 최적화에서는 큰 문제가 생기지 않는다. 하지만 컴포넌트는 새로생기기 때문에 useState를 사용하지 않은 변수

이 외에도 위와같이 스타일을 지정해줄 수도 있다.

그럼 스타일을 통체로 관리하기 위해서는 어떻게 해야할까?

위와같이 스타일을 객체로 관리하는 방법이 존재한다. 하지만 이렇게 할경우 문제가

위와같이 되어있다면 다른 곳에서 색을 바꾸었을때 글자크기는 초기화 된다. 그래서 이것을 막기 위해서 ...을 사용한다.

그래서 위와같이짜면 글자색이 바뀌더라도 글자크기가 바뀌지는 않는다.

이런게 Event Handler이다. 이것을 쓸때 주의점이 있다. 먼저 Camel Case 여야한다.

JSX에서는 해당 부분에서 실행할 함수를 적어주어야한다.

태그에만 Event Handler을 달아줄 수 있다. 컴포넌트에 달아도 실행되지 않는다.

Event listener에는 ()를 처주면 안된다 이러면 함수의 결과가 반환된다. 하지만 변수를 넘기기 위해서는 IIFE를 써야한다.

그외의 Event Listener은 그때그때 찾아봐야한다.

함수의 첫번째 인자에는 이벤트정보가 담기어 온다. 이건 객체이기 때문에 필요한 정보만 긁어서 사용하면 된다. 대표적으로 target 인자들을 많이 쓴다.

이번에는 위와같이 메세지의 값이 바뀔때마다 메세지를 업데이트해주는 코드를 짰다.

코드를 보다 깔끔하게 짜기위해서 위와같이 구현해주자.

그런데 앞으로 input이 여러개로 늘어나면 모든 페이지별로 useState를 다 써줘야하니 코드가 너무 비효율적이다.

그래서 이걸해결하기 위해 useState는 하나만 쓰되 태그에 name 을 추가해주어서 구분해주는 것이다.

그리고 받아온 값을 name과 value로 나누어 기존 form에서 name 키값에 해당하는 것을 value로 바꾸어주는 것이다.

이때 중요한것이 useState를 반드시 빈값으로라도 초기화해놓자. 안그러면 에러가뜬다.

위와같이 잘 실행되는 것을 확인할 수 있다.

이번에는 사용자가 누른키를 체크해보자.

위와같이 onKeyPress 성분을 사용하고 그 내부에서 객체데이터중 key의 값을 반환받아 어떤 키가 사용되었는지 확인할 수 있다.

그래서 이걸 응용하면 위와같이 key값에 따라 함수를 실행시킬 수 있게 된다.

DOM에 직접 접근하기위해서 useRef를 사용하게 된다.

 

map, filter, reduce

하지만 이번에는 map함수를 알아볼것이다. map함수는 배열에 사용하는 함수이다. 함수형프로그래밍 map, filter가 대표적이다. map함수는 배열로서 사용하게 된다.

const numbers = [1,2,3,4,5];

const newNumbers = numbers.map((e) => {return (e+1)});

const newNumbers = numbers.map((e, i) => {return (e+1)});

배열을 변형시키어 새로운 배열을 만들어낸다. 이때 callBack함수안에 numbers에 있는 성분들이 담긴다. 그리고 이 성분들의 반환값을 다른 형태로 반환하면 새로운 배열에 각 성분들이 바뀐 형태로 반환된다.

 

참고로 map의 두번째 인자는 인덱스 값이다.

마지막성분은 map을 호출한 원본 배열이다.

 

아래 나오는 foreach, filter 역시 성분은 동일하다.

 

비슷하게 foreach, filter 함수도 존재한다.

 

foreach

foreach함수는 map이랑 비슷하지만 그냥 안에 있는 함수를 실행하기만한다. 즉 반환하는게 없다.

numbers.forEach((e)=>{console.log(e)})

 

filter

filter함수는 return 값이 true인 것에대해서만 새로운 배열을 만들어낸다.

numbers.filter((e)=>{e>3})

 

reduce

reduce는 그 내부의 값이 누적된다. 그래서 리스트 안의 값을 다 더할때 사용하게 된다.

사실 reduce는 그 이상의 역활을 수행한다.

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍 - ZeroCho Blog

const numbers = \[1,2,3\];

numbers.reduce((init, cur)=>{}, 0);

성분은 init과 cur이고 뒤쪽 0은 초기값이다. 그래서

0,1 -> 1,2 -> 3,3 = 6 으로 출력된다.