7/18 TIL

1. var, let, const 차이

• var:

  • 함수 스코프(function scope)를 가집니다.
  • 같은 이름의 변수를 다시 선언할 수 있습니다.
  • 호이스팅(hoisting)이 발생하며, 선언 부분이 스코프의 최상단으로 끌어올려집니다.

• let:

  • 블록 스코프(block scope)를 가집니다.
  • 같은 이름의 변수를 다시 선언할 수 없습니다.
  • 호이스팅이 발생하지만, 초기화가 되기 전까지는 접근할 수 없습니다. (Temporal Dead Zone)

• const:

  • 블록 스코프(block scope)를 가집니다.
  • 상수(constant)로, 선언 시 반드시 초기화를 해야 하며, 이후 값이 변경될 수 없습니다.
  • 객체의 경우, 객체의 프로퍼티는 변경 가능하나 객체 자체를 재할당할 수는 없습니다.

2. == vs ===

• == (동등 연산자):

  • 데이터 타입을 자동 변환하여 비교합니다.
  • 예: 1 == '1'은 true입니다. (숫자 1과 문자열 '1'이 타입 변환 후 같다고 간주)

• === (일치 연산자):

  • 데이터 타입과 값 모두를 엄격하게 비교합니다.
  • 예: 1 === '1'은 false입니다. (숫자와 문자열은 타입이 다르기 때문에 다름)

3. display: none 과 visibility: hidden 차이

• display: none:

  • 요소를 화면에 표시하지 않으며, 레이아웃에서도 완전히 제거됩니다.
  • 해당 요소는 DOM에서 여전히 존재하지만, 공간을 차지하지 않습니다.

• visibility: hidden:

  • 요소를 화면에 표시하지 않지만, 레이아웃에서는 공간을 차지합니다.
  • 해당 요소는 DOM에 존재하며, 단지 보이지 않을 뿐입니다.

4. React에서 state와 props가 무엇인지

• state:

  • 컴포넌트 내부에서 관리하는 값입니다.
  • 값이 변경될 때마다 컴포넌트가 다시 렌더링됩니다.
  • 동적인 데이터를 관리하는 데 사용됩니다.

• props:

  • 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다.
  • 자식 컴포넌트는 props를 통해 데이터를 받아 표시하거나 사용할 수 있지만, 변경할 수는 없습니다.
  • 컴포넌트 간의 데이터 전달을 위해 사용됩니다.

5. useEffect로 컴포넌트 생명 주기 로직을 어떻게 처리하나

• useEffect:
  • 함수형 컴포넌트에서 사이드 이펙트를 처리하는 데 사용됩니다.
  • 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 특정 로직을 실행할 수 있습니다.
  • 첫 번째 인자로 콜백 함수를, 두 번째 인자로 의존성 배열을 받습니다.

useEffect(() => {
  // 마운트 시 실행
  console.log('컴포넌트가 마운트되었습니다.');

  return () => {
    // 언마운트 시 실행
    console.log('컴포넌트가 언마운트되었습니다.');
  };
}, []); // 빈 배열을 전달하면 마운트와 언마운트 시에만 실행됨

6. 타입스크립트의 장점

• 정적 타입 검사:

  • 코드를 작성하는 과정에서 타입 오류를 미리 확인할 수 있습니다.
  • 코드의 가독성과 유지보수성을 향상시킵니다.

• 코드 자동 완성:

  • IDE의 지원을 받아 코드 자동 완성 기능을 사용할 수 있습니다.
  • 개발 생산성을 높여줍니다.

• 명시적 타입 선언:

  • 코드의 의도를 명확히 하고, 다른 개발자가 이해하기 쉽게 만듭니다.
  • 팀 내 협업 시 유용합니다.

• 대규모 프로젝트에서 유리:

  • 타입 시스템을 통해 코드베이스 관리가 용이해집니다.
  • 리팩토링 시 발생할 수 있는 오류를 줄일 수 있습니다.