면접 준비 및 복습 (React, Javascript)

오늘 개발자로써 첫 면접을 보고 왔다
기술면접 약 50분, 코딩 테스트 2시간을 했는데 아직 준비가 많이 부족하다는 것을 느꼈다
오늘 받았던 질문에 대해 정리해보고 코딩 테스트에서 부족했던 부분을 복습하고 리액트에 대해서 추가 정리해보려고 한다

var, let, const 차이?

var

function-scoped, 변수 재할당, 재선언 가능, function-scoped로 hoisting
호이스팅: 변수와 함수를 실행전에 맨 위로 끌어올림 (블로깅 예정 : 호이스팅에 대해서)

var user = nain
var user = nain2
c = 'nain'
var c

let

block-scoped,변수 재할당 가능 but 재선언 불가능, block-scoped 단위로 hoisting
변수를 선언하고 나중에 할당 가능

let user
user = nain

const

block-scoped,변수 재선언, 재할당 불가능 block-scoped 단위로 hoisting
변수를 선언함과 동시에 할당 해야함

const user = nain

reference link: https://poiemaweb.com/es6-block-scope

클로저에 대해서

function outerFunc() {
  let x = 10;
  const innerFunc = function () { console.log(x); };
  return innerFunc;
}

const inner = outerFunc();
inner(); // 10

자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우,
외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데
이러한 함수를 클로저(Closure)라고 부른다.
자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.
가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는것

 const increase = (function () {
      // 카운트 상태를 유지하기 위한 자유 변수
      let counter = 0;
      // 클로저를 반환 (자신이 생성됐을 때의 렉시컬 환경(Lexical environment)을 기억하는 클로저)
      return function () {
      // 상태변경
        return ++counter;
      };
    }());
     incleaseBtn.onclick = function () {
      count.innerHTML = increase();
    };

클로저 함수는 자신이 선언됐을 때의 렉시컬 환경인 즉시실행함수의 스코프에 속한 지역변수 counter를 기억한다.
따라서 즉시실행함수의 변수 counter에 접근할 수 있고 변수 counter는 자신을 참조하는 함수가 소멸될 때까지 유지된다.

reference link: https://poiemaweb.com/js-closure

forEach와 map의 차이점

forEach

기존의 array를 변경시킴
반환 값을 버리고 항상 정의되지 않은 값을 반환한다
rray안에 데이터를 변경하려는 것이 아니라 데이터베이스에 저장하거나 로그아웃하는 것과 같은 작업에 유용

map

새로운 array를 반환함
메모리를 할당하고 반환 값을 저장한다
데이터를 변경하고자 할때 유용하고 forEach보다 더 빠름
(map,filter,reduce 등)

리액트에서 useState, useEffect 작동 원리 , 왜 사용하는지

useState

상태 유지 값과 그 값을 갱신하는 함수를 반환
setState 함수는 state를 갱신할 때 사용합니다
React는 setState 함수 동일성이 안정적이고 리렌더링 시에도 변경되지 않을 것이라는 것을 보장한다
reference link: https://ko.reactjs.org/docs/hooks-reference.html#usestate

useEffect

명령형 또는 어떤 effect를 발생하는 함수를 인자로 받음
componentDidMount와 componentDidUpdate와는 다르게,
useEffect로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

조건부 effect
2번째 인자를 전달하여 인자가 변경될 때에만 useEffect가 실행이 됨
만약 빈 배열이 전달되면 props와 state는 항상 초기값을 가지게 됨

더 공부해야 할것
-- 빈 배열을 전달하는 거보다 더 나은 해결책
https://ko.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies
https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often
-- react state and props에 대해 설명해 보세요
-- react immutable에 대해 설명해 보세요
-- Form data 사용해보기