[React Native] Component Props 한번에 끝내기

Component와 Props는 React Native를 시작하면서 가장 기본적이면서 중요한 개념이에요

Component와 Props가 무엇이고, 왜 필요한지 그리고 이 두개가 어떻게 연관되어 있는지 자세히 알아볼게요

Component / Props

Component란?

Component는 UI를 독립적인 단위로 분리하여 재사용 가능한 코드 조각으로 보는 것입니다.

한 마디로, 앱의 각 부분(버튼, 입력창, 카드 등)을 component라고 생각하면 됩니다.

네이버 메인 페이지를 예를 들어서 설명해볼게요

Naver 홈화면

네이버 홈화면에 로그인 버튼이 있습니다. 로그인 버튼은 홈 뿐만 아니라 여러 서비스에서 공통으로 사용한 기능일거에요.

로그인이 필요한 화면, 서비스마다 버튼 구현을 모두 할 생각하면 벌써부터 귀찮아요.

개발자는 귀차니즘이 많아야 한다는 말이 있듯이. 공통으로 사용될 것 같은 UI는 Component라는 개념으로 분리해서 만들어놓으면 재활용하고 유지보수에 탁월합니다.

그래서 Front 개발자에게 가장 중요한 역량이 Component를 나누고 이를 재활용하는 능력입니다.

 

Props란?

Props는 Property(속성)의 약자로 컴포넌트끼리 값, 데이터를 전달하는 방법입니다. 

정확히는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 전달받은 Props 값은 사용만 가능하고 수정할 수는 없어요.

수정은 state 개념을 사용해서 가능합니다. 다음에 포스팅할 예정이에요!

부모 컴포넌트가 자식 컴포넌트에게 데이터를 넘겨주는 간단한 예시 코드를 살펴볼게요

function Greeting(props) {
  return <Text>Hello, {props.name}!</Text>;
}

function App() {
  return <Greeting name="React Native" />;
}

 

App(부모)이라는 컴포넌트가 Greeting(자식)이라는 컴포넌트를 사용했습니다.

여기서 Greeting이 사용할 Hello 뒹의 값을 부모가 전달해주고 있어요.

만약 전달받지 않고 Greeting이 직접 작성하면 어떻게 될까요? 네 맞습니다. 인삿말이 바뀔 때마다 새로운  Greeting 함수를 만들어야될거에요. 많이 불편합니다!

함수형 컴포넌트 vs. 클래스형 컴포넌트

함수형 컴포넌트

함수형 컴포넌트는 state, lifeCycle 을 사용할 수 없어요. 그래서 Hook이라는 개념을 사용합니다 

클래스형 컴포넌트보다 메모리 자원을 덜 사용해서 효율적이에요.

그리고 컴포넌트 사용이 편리해서 개발자의 생산성도 많이 높여주는 편입니다. 

// 함수형 컴포넌트 예제
function Greeting(props) {
  return <Text>Hello, {props.name}!</Text>;
}

 

보시는것 처럼 함수형 컴포넌트는 코드가 간결하고 가독성이 좋습니다. 또한, Hooks를 통해 상태 관리와 생명주기 기능도 구현할 수 있습니다.

 

클래스형 컴포넌트

클래스형 컴포넌트는 말 그대로 Class 키워드가 필요합니다.

Component로부터 상속받아 사용해야 하고  render() 메소드가 반드시 필요합니다. 

this.state 및 this.setState와 같은 상태관리 state 그리고  componentDidMount, componentDidUpdate 생명주기(lifeCycle)ㅜ메서드 사용이 가능합니다. 

// 클래스형 컴포넌트 예제
class Greeting extends React.Component {
  render() {
    return <Text>Hello, {this.props.name}!</Text>;
  }
}

 

클래스형 컴포넌트는 초기 React에서 주로 사용되었으며, 상태 관리 및 생명주기 메서드에 대한 더 명확한 접근 방법을 제공합니다.

어떤 것을 사용할까?

최근의 추세는 함수형 컴포넌트와 Hooks를 사용하는 것입니다. 

간결하고, 유연하며 React 팀, 공식문서에서도 이 방향을 권장하고 있습니다.  그러나, 기존 프로젝트에서는 클래스형 컴포넌트가 여전히 사용될 수 있으므로 둘 다 이해하는 것이 중요합니다.

다음 포스팅에서는 Hook에 대해 자세히 알아보겠습니다!