조사해보기

컴포넌트를 설계할 때 명확한 기준이 있다면 조금 더 수월한 설계가 가능합니다. 컴포넌트를 설계하고 나누는 기준에는 어떤 것들이 있을까요?

• 재사용성: 사용될 수 있는 다른 부분이 있는지 확인하면 효율성이 증가하고, 코드 중복을 줄일 수 있다.
• 단일 책임 원칙: 각 컴포넌트가 하나의 기능만을 수행하도록 설계해야 한다.
• 가독성: 하나의 컴포넌트가 너무 많은 로직을 포함하지 않도록 작은 단위로 분리하여 설계해야 한다.
• UI 요소: 시각적 요소를 컴포넌트로 분리하면 유연하게 디자인 변경 및 유지 보수를 할 수 있다.

대부분에 상황에서는 함수 컴포넌트를 사용한다고 언급했습니다. 클래스 컴포넌트를 지양하게 된 이유에는 어떤 것들이 있을까요?

• 클래스 컴포넌트는 class 선언, component 상속, 생성자 등의 선언이 필요한 반면, 함수 컴포넌트는 보다 선언하기 편하고, 작성해야하는 코드도 적다.
• 함수 컴포넌트가 클래스 컴포넌트보다 메모리 자원을 적게 사용하며, 빌드 후 파일 크기도 더 작다.
• 함수 컴포넌트는 render() 함수가 필요하지 않아 마운트 속도가 빠르고, 가독성이 좋다.

클래스 컴포넌트를 반드시 사용해야 하는 경우는 언제일까요?

• 클래스 컴포넌트에서 사용하는 state나 생명주기 메서드 등을 사용해야 하는 경우 클래스 컴포넌트를 사용해야 한다.

컴포넌트 간에는 부모-자식 관계가 존재할 수 있습니다. 어떨 때 부모-자식 관계가 성립하는 걸까요?

• 하나의 컴포넌트가 다른 컴포넌트를 포함하고 있을 때, 포함하고 있는 컴포넌트를 부모, 포한된 컴포넌트를 자식 컴포넌트로 보며, 부모-자식 관계가 성립한다.

(필수) 배열을 렌더링할 때, 각 컴포넌트에 key값을 만들어 전달해줘야 합니다. key는 왜 필요한 걸까요? key값을 정하는 기준은 무엇인가요?\

• key는 컴포넌트 리스트를 렌더링 할 때 어떤 컴포넌트에 변동이 있었는지 알아내기 위해 사용한다. key를 이용하면 효율적인 변동 사항 확인 및 렌더링이 가능하다.
• key 값은 id와 같은 고유 식별자를 사용해야 하며, 배열의 index와 같이 변경될 가능성이 있는 식별자를 사용해서는 안된다.

(필수) 조건부 렌더링이란 무엇일까요? 어떨 때 사용할 수 있을까요?

• 특정 조건에 해당하는 일부 컴포넌트만 렌더링 하는 것을 조건부 렌더링이라고 한다. 조건 확인을 위해 삼항 연산자, 논리 연산자 등을 사용한다.
• 특정 조건에 따라 화면에 띄우는 정보나 컴포넌트를 다르게 설정하고 싶을 때 사용할 수 있다.