4주차 수업을 마치며

4주차가 지낫다. React 수업에서 시작된 멘붕은 어느정도 치유가 된 것 같다. 이번 4주차에서는 React 기초의 마무리와 재귀함수, 비동기 개념에 대해 학습하였다. 점차 배우게되는 내용에서 놓치거나 상기해야할 부분들이 많아짐에따라 앞으로는 후기를 작성하면서 해당 주에 있었던 기억할만한 이론, 코드 센스 등이 있다면 기록해보려고 한다.

React_이벤트 핸들러에 '인자' 전달하기

React에서 state를 사용하면서 같이 사용하게 되는 것이 이벤트 핸들러였다. 아래 코드를 살펴보면, div엘리먼트로 감싼 a엘리먼트를 map함수를 이용하여 images라는 dumyData에 존재하는 객체의 길이만큼 생성될 수 있도록 작성하고, a 엘리먼트에서 clcik이벤트 발생 시, handleClick함수가 실행되도록 작성하였다. 또한 a 엘리먼트의 textContent 값으로 들어가있는 것은 Thumnail 컴포턴트로 props를 전달하기 위한 코드이다.

<div id='list className='flex'>
	{
      images.map(source=> <a onClock={handleClick}>
      <Thumbnail source={soource.src} key={source.id} />
      </a>)
    }
<div>

그런데 위 코드는 단순히 handleClick 함수의 인자로 event내용만 전달할 뿐이다. 때문에 map함수를 통해 생성된 여러개의 a엘리먼트를 생성하고 클릭 이벤트를 동작시켰을 경우, 동작은 제대로 될지언정 실제 컴퓨터는 어떤 엘리먼트를 클릭했는지 구분할 수 없다는 것이다. 이는 handleClick이벤트의 인자에 id값을 전달함으로써 해결할 수 있다. 아래의 방법으로 문제를 해결할 수 있었다.

<div id='list className='flex'>
	{
      images.map(source => <a onClock={(e) => handleClick(source.id, e)}>
      <Thumbnail source={soource.src} key={source.id} />
      </a>)
	}
<div>

find() 함수

위에 React 핸들러 함수에 인자 값을 전달하는 문제를 풀이하면서 알게 된 함수인데, filter와 같지만 다른(?) 느낌에 언젠가 요긴하게 쓰일 것같아서 기억해두고자 내용에 포함해보았다.
사용법은 내가 자주 사용하는 filter()함수와 같은데, 다만 return하게되는 값이 callBack함수에 작성된 조건에 해당하는 값 중, 첫번째 값만을 반환한다는 것이다. 코드의 작성은 아래와 같다. (아래 코드는 arr배열 중, 홀수를 찾아내도록 작성하였다.)

const arr = [1,2,3,4,5,6,7,8];

//30 이상인 값 - find() 사용
const result = arr.find(value => value%1);
console.log(result); ---> 1

위와 같이 코드를 작성하여 console로 확인해보면 결과 값으로 arr배열의 요소이면서 홀수인 1이 결과 값으로 산출되는 것을 확인할 수 있다.

재귀 함수

일단 재귀함수의 별명은 통곡의 벽이다.. 실제 간단한 예제를 접근해봤음에도 작성한 답이 정말 완벽한 재귀형태를 띄는 답인지 확신이 안서긴 한다. 그렇기 때문에 이해와 기억을 되새기고자 기억에 남았던 간단한 예제로 재귀함수를 돌아보고자 한다.

아래 코드에 작성되어있는 함수는 배열을 인자로 받고, 배열의 요소를 뒤집는 코드를 재귀함수로 작성하는 예제였다. 물론 reverse()함수를 이용하면 매우 쉽게 뒤집을 수 있으나, 우리는 재귀함수의 이해를 위해 굳이(?) 작성해봤다.

function reverseArr(arr) {
  if (arr.length === 0) {
    return [];
  }
  return reverseArr(arr.slice(1)).concat(arr[0]);                             

먼저 if문 안에 인자로 들어오는 배열의 길이가 0일 경우를 조건으로 재귀함수의 탈출 조건을 만들어 줬다. 탈출 조건이 필요한 이유는 다음의 return 뒤로 이어지는 코드에서 이해할 수 있는데 reverseArr(arr.slice(1))는 reverseArr()함수를 호출하는 재귀함수의 핵심인 부분이다. 이를 통해 탈출 조건이 오기까지 계속해서 인자값으로 들어오는 arr의 0번 index를 제외한 나머지 배열의 요소를 reverseArr()함수의 인자값으로 호출하게 된다. 그리고 이어지는 concat(arr[0])코드에 의해 배열에는 기존 요소의 순서 반대로 쌓이게 된다.
그 순서를 만약 console로 확인해 본다면 아래와 같을 것이다.

reverseArr의 인자 값과 배열이 만들어지는 순서
[1,2,3,4]  ---> arr[0]은 1
[2,3,4]    ---> arr[0]은 2
[3,4]      ---> arr[0]은 3
[4]        ---> arr[0]은 4 
[] ---> 탈출 조건

return [4,3,2,1]