나홀로 리액트 스터디 0.3

🍐 useState는 왜 배열을 반환할까

객체를 반환하는 경우에는 객체 분해 할당 시 사용자가 원하는 이름으로 변경하는 것이 어려우나, 배열 구조 분해 할당은 자유롭게 이름이 선언 가능하기 때문에 배열을 반환하는 것으로 추측한다고 한다.

배열 분해 할당은 콤마(,)를 기준으로 위치에 따라 값이 결정되는데, 중간 값을 비우고 싶으면 비우면 된다 (ex: const [first, , , ,fifth] = numberArray)

다만 배열의 길이가 길 때 이런식으로 사용하면 실수 유발 가능성이 크기 때문에 배열의 길이가 짧을 때 사용하는 것이 좋음.

default 값을 설정할 수도 있는데

const [a=1, b=2, c=3] = arr

default 값이 적용되는 것은 해당 값이 undefined일 때만이고, null, 0, ''등의 값일 때는 적용되지 않는다.
(*자바스크립트에서 기본 값을 사용할 수 있는 경우는 undefined일 때 뿐이다)

딥 다이브 책에서는 객분할, 배분할 모두 지원하지 않는 경우 바벨로 변환했을 때 어떻게 변환되었는지를 보여주고 있는데, 객체 분해 할당은 배열 분해 할당에 비해 번들링 크기가 커진다.
(상대적으로 복잡, 이는 객분할 말고 전개 구문을 사용할 때에도 마찬가지로 객체일 때 더 복잡하고, 번들링 크기가 크다.)
그래서 객분할을 쓸 때는 어플리케이션이 ES5를 고려해야하고, 객분할을 자주 쓰지 않는다면 사용 시 검토가 필요하다고 함.
외부 라이브러리인 lodash.omit, rambda.omit 등으로 트렌스파일된 객분할처럼 객체에서 특정 속성을 제거하여 리턴할 수도 있다.

🍐 reduce, filter, map, forEach

reduce는 단순히 합계를 구하는 것 외에도 filter와 map의 작동을 reduce 하나로 구현할 수도 있음.

//짝수만 *100하는 예제
const arr = [1,2,3,4,5]

//filter, map 사용
const result = arr.filter((item) => item % 2 === 0).map((item) => item*100)

//reduce 사용
const result2 = arr.reduce((result,item) => {
  	if(item % 2 === 0){
      result.push(item*100)
    }
  return result
},[])

forEach는 반환값이 없으며, 실행되는 순간 에러를 던지거나, 프로세스를 종료하지 않는 이상 멈출수가 없다.
break나 return 등으로도 배열의 순회를 멈출 수 없음.

const run = () => {
  const arr = [1,2,3]
  arr.forEach((item) => {
    console.log(item)
    if(item === 1){
      console.log('finished!')
      return
    }
  })
}

run()
//결과값 : 
//1
//finished!
//2
//3

forEach 내의 콜백 함수는 무조건 O(n)만큼 실행됨을 알고 있어야 이후 최적화 가능성을 검토할 수 있다.

🍐 삼항 연산자 사용 안 하는 거 그거 어떻게 하는 건데.

삼항 연산자를 남용하는 게 좋지 않다는 이야기를 듣고서 그럼 뭘 쓰라는 거지... 싶었던 적이 있다.
책에서는 아래와 같은 가독성이 좋지 않은 방법을 하나 소개하는데, 선호되는 방법은 아니며, 즉시 실행함수를 불필요하게 선언해서 사용해야 한다고 한다.
참고하려고 적어두는 건 아니고, 그냥 이런 게 있다는 게 신기해서 기록해둔다.

const App() {
  const [color, setColor] = useState('')
  
  return(
    <div>
    {(() => {
    if(color === 'red'){
      return '빨강'
    }else{
      return '노빨강'
    }
  })()}
    </div>