[221109] 오늘의 배움(TIL) - React / Jest / React Testing Library

🔸 React

• Container 컴포넌트란 무엇인가?

: 상태와 그 상태를 변경할 수 있는 비즈니스 로직을 가지는 컴포넌트
: Presentational 컴포넌트를 포함할 수 있고, 포함하고 있는 Presentational 컴포넌트에 본인이 가지고 있는 상태를 props로 전달하여 화면을 렌더링하도록 하는 컴포넌트
: Hooks 등장 이전에는 클래스 컴포넌트만 Container 컴포넌트의 역할을 수행할 수 있었으나, Hooks 등장 이후 함수 컴포넌트도 Container 컴포넌트의 역할 수행 가능

• React에서 컴포넌트의 역할을 Presentational, Container로 구분하는 이유는 무엇인가?

: 각 컴포넌트마다 고유한 역할을 토대로 컴포넌트 재사용과 디버깅을 용이하게 하기 위해서

• 애플리케이션에서 다루는 상태의 종류를 React 관점에서 어떻게 구분할 수 있는가?

: 서버로부터 받아오는 데이터인 Model 상태
: 변경되면 화면이 리렌더링되는 View/UI 상태
: 브라우저(애플리케이션) 실행 중에 유지되어야 하는 Session 상태
: 서버와의 통신 상태를 나타내는 Communication 상태

• 클래스 컴포넌트와 함수 컴포넌트의 차이는 무엇인가?

: 가장 두드러지는 차이는 상태 포함 가능 여부, 클래스 컴포넌트는 상태를 가질 수 있지만 함수 컴포넌트는 상태를 가질 수 없음
: 또한 컴포넌트가 리렌더링 될 때 함수 컴포넌트는 함수 자체가 다시 실행되지만, 클래스 컴포넌트는 클래스가 생성한 인스턴스가 실행됨
: 클래스가 생성한 인스턴스는 리렌더링 시 이전 상태에 접근하거나 이전 상태를 조작할 수 있음

• Presentational 컴포넌트 생성 시 함수 컴포넌트를 사용해야 하는 이유는 무엇인가?

: 클래스 컴포넌트는 함수 컴포넌트에 비해 컴파일 과정에서 파일의 크기가 커지므로 성능 상 단점이 있음, 그러므로 상태를 관리하지 않는 표현 목적의 컴포넌트를 생성할 때는 함수 컴포넌트를 사용하는 것이 바람직함

• React에서의 props와 state는 무엇인가?

: props는 컴포넌트가 외부로부터 전달 받아 사용할 수 있는 속성이자, 읽기 전용이라 변경할 수 없는 값
: 하지만 사용자의 입력에 따라 props를 변경해야 하는데 컴포넌트 내부에서 state에 props를 할당해서 조작할 수 있음, 이 때 state는 해당 state를 사용하는 컴포넌트 안에서만 유효함

• React의 클래스 컴포넌트에서 state를 정의할 수 있는 방법은 무엇인가?

: constructor 내부에 this.state를 사용해 정의할 수 있음
: 혹은 state 클래스 필드를 사용하여 정의할 수도 있음

• 클래스 컴포넌트에서 정의한 state를 변경할 수 있는 방법은 무엇인가?

: 기본적으로 state는 불변 데이터이기 때문에 setState API를 사용해 업데이트해야 함

• React에서 state를 불변성으로 관리하는 이유는 무엇인가?

: state가 변경될 수 있다면 다른 곳에서 예기치 못하게 변경한다든가 하는 사이드 이펙트가 발생할 수 있으므로 불변성을 유지하여 예측이 쉽게끔 할 수 있음
: 또한 state의 불변성을 기본적으로 유지하면 변경 발생 여부를 매번 관찰하지 않고, 변경이 발생했을 때만 렌더링을 수행하면 되기 때문에 애플리케이션 최적화에 도움이 됨

• setState API의 인수로는 무엇을 전달할 수 있는가?

1. 새로운 state 객체를 전달하여 state를 변경할 수 있음
2. state를 변경하는 함수를 전달하여 state를 변경할 수 있음, 변경할 state가 많을수록 함수를 전달하는 것이 깔끔함
3. 추가적으로 두 번째 인수에 콜백 함수를 전달할 수 있음
   
   

• setState API의 두 번째 인수로 전달할 수 있는 콜백 함수는 어떤 역할을 수행하는가?

: 첫 번째 인수로 state가 변경된 후에, 즉 모든 상태가 업데이트된 후에 두 번째 인수로 전달한 콜백 함수가 실행됨

• React의 setState API는 동기, 비동기 중 어떤 방식으로 동작하고, 그 이유는 무엇인가?

: 동기 방식으로 상태를 업데이트 한다면, 사용자 입장에서 실시간으로 상태 변경에 따른 렌더링을 볼 수 없음
: 즉, 불필요한 렌더링을 지양하고 상태 업데이트를 일괄적으로 처리하기 위해 비동기 방식으로 처리됨

• React의 라이프 사이클 메서드란 무엇인가?

: 클래스 컴포넌트에만 제공되는 메서드로, 컴포넌트의 생명 주기에 걸쳐 실행되는 콜백 함수들을 의미함

• React의 라이프 사이클 메서드에는 무엇이 있고, 각각 어떤 역할을 하는가?

1. constructor는 컴포넌트가 생성되는 시점에 호출되는 메서드
2. render는 컴포넌트가 렌더링되는 시점에 호출되는 메서드
3. componentDidMount는 컴포넌트가 실제 DOM에 삽입(mount)된 이후에 호출되는 메서드
4. componentDidUpdate는 상태 변경으로 컴포넌트가 업데이트(리렌더링)된 이후에 호출되는 메서드
5. componentWillUnmount는 컴포넌트가 제거될 때 호출되는 메서드

🔸 Jest & React Testing Library

• jest.fn은 무엇이고, 왜 사용하는가?

: Jest에 내장되어 있는 모의 함수를 의미하고, 이벤트 핸들러 테스트 시 따로 함수를 생성하지 않아도 모의 함수를 등록하여 사용할 수 있음

• getByTestId 메서드는 무엇이고, 왜 사용하는가?

: getByRole 메서드로 찾을 수 없는, 즉 role 속성이 존재하지 않는 div와 같은 컴포넌트를 찾기 위해 사용할 수 있음
: 컴포넌트에 data-testid props를 전달하면 getTestId 메서드로 설정한 값에 따라 컴포넌트를 찾을 수 있음

• CSS 스타일링이 정상적으로 적용되었는지 테스트하는 방법은 무엇이고, 테스트 시 주의할 점은 무엇인가?

: toHaveStyle 메서드를 사용하여 테스트할 수 있음
: 다만 값을 단위와 함께 작성해야 하는 width, height 등의 속성은 반드시 단위를 명시해야 함

• TDD 방식을 사용한 UI 테스트의 한계점은 무엇인가?

: CSS의 직접적인 반영이 되지 않음
: 스타일링을 테스트하려면 inline으로 스타일을 삽입하는 방식을 사용해야 함
: UI가 눈에 보이지 않기 때문에 사용자와의 상호작용을 테스트하기 어려움