728x90

컴포넌트(component)를 직역하면 '구성 요소'라는 의미이다. 프런트엔드 개발에서의 컴포넌트는 유저 인터페이스를 구성하는 요소라고 이해하면 된다. 리액트로 프런트엔드를 개발할때는 수많은 컴포넌트를 만들면서 진행하게 된다. 리액트에서의 컴포넌트는 단순히 보이는 부분만 담당하는 것이 아니라, 사용자가 어떠한 행동을 취했을 때 어떠한 작업을 할지도 설정해줄 수 있다.

// App.js
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello React!</Text>
      </View>
    </SafeAreaView>
  );
};
export default App;

여기서 App이 바로 컴포넌트이다. 그리고 App 컴포넌트 안에는 또 다른 다양한 컴포넌트가 들어있다.

  • SafeAreaView 컴포넌트는 iPhone X 이상 기종에서 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지해준다.
  • View 컴포넌트는 가장 기본적인 컴포넌트로 레이아웃 및 스타일을 담당한다.
  • Text 컴포넌트는 텍스트를 보여주는 역할을 한다.

리액트에서는 App 컴포넌트에 작성한 것과 같이, 컴포넌트를 조합해 새로운 컴포넌트를 만들 수 있다.

나만의 컴포넌트를 만들고 만든 컴포넌트를 App 컴포넌트에 사용해 화면에 나타내본다.

프로젝트 디렉토리에 components라는 디렉토리를 생성하고 그 안에 .js파일을 생성한다. 컴포넌트를 만들 때 꼭 디렉토리를 새로 만들어 작업할 필요는 없다. (다양한 컴포넌트를 만들 때 컴포넌트를 모두 프로젝트 최상단 디렉토리에 만들면 프로젝트를 탐색하기 어려울 수 있으므로 디렉토리를 분류함.)

파일을 만든 다음 가장 먼저 해야 할 일은 상단에서 React를 불러오는 것이다. 다음으로 사용할 컴포넌트를 불러온다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

그 다음에는 컴포넌트를 선언한다. 새로운 컴포넌트를 선언하는 방법은 두 가지가 있다.

첫 번째 방법은 함수로 컴포넌트를 선언하는 것이고,

두 번째 방법은 클래스로 컴포넌트를 선언하는 것이다.

가장 많이 사용하는 방법은 함수로 선언하는 것이다. 클래스는 2018년 전에 주로 사용하던 방법이다.

함수 형태로 만드는 컴포넌트는 함수 컴포넌트라고 부른다. 다음과 같이 코드를 작성한다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

function Greeting() {
  return (
    <View>
      <Text>함수 컴포넌트</Text>
    </View>
  );
}

export default Greeting;

함수로 선언한 컴포넌트에서는 이와 같이 XML 형태로 이루어진 내용을 반환해줘야 한다.

이 문법을 JSX라고 부른다.

최하단의 export default Greeting;은 App 컴포넌트에서도 작성한 것처럼 다른 파일에서 이 컴포넌트를 불러올 수 있게 해주는 코드이다.

이제 Greeting 컴포넌트를 App 컴포넌트에서 불러와 사용해본다.

// App.js
import React from 'react';
import {SafeAreaView} from 'react-native';
import Greeting from './components/Greethig';

const App = () => {
  return (
    <SafeAreaView>
      <Greeting />
    </SafeAreaView>
  );
};

export default App;

컴포넌트 코드의 상단에서 더 이상 사용하지 않는 컴포넌트 View와 Text를 지웠다. 그리고 App 컴포넌트에서 SafeAreaView 내부에 Greeting 컴포넌트를 사용했다.

이제 터미널에 yarn android 를 입력하고 결과를 보면 Greeting 컴포넌트 Text에 입력한 함수 컴포넌트 가 나타난다.

Metro 실행
yarn ios 또는 yarn android 명령어를 입력했을 때 실행되는 Metro가 꺼져 있다면 yarn ios 또는 yarn android를 한 번 더 입력한다. iOS 시뮬레이터 또는 안드로이드 에뮬레이터가 켜져 있어도 Metro가 실행 중이 아니라면 앱에 변경이 반영되지 않는다.

App 컴포넌트를 보면 컴포넌트를 선언할 때 화살표 함수 문법을 사용했다.

const App = () => {
	(...)
}

반면 Greeting 컴포넌트에서는 function 키워드를 사용해 컴포넌트를 선언했다.

function Greeting() {
	(...)
}

두 방식은 코드 스타일이 다르나 기능적으로는 차이가 없다. 화살표 함수 문법을 썼을 때의 장점은, 복잡한 로직 없이 바로 반환하는 코드라면 다음과 같이 중괄호 코드 블록과 return 키워드를 생략할 수 있다는 것이다.

const App = () => (
	<SafeAreaView>
		<Greeting />
	</SafeAreaView>
);

함수 컴포넌트를 만들 때 어떤 방식을 사용하든 상관없다. 취향에 따라 마음에 드는 것을 선택하되 일관성 있게만 사용하면 된다.

function 키워드를 사용해 선언하는 방식을 주로 사용한다.
리액트 공식 매뉴얼에서도 이 방식으로 컴포넌트를 선언하고, 페이스북의 리액트 개발팀의 일원이자 리액트 생태계에서 상당히 영향력 있는 인물인 앤드류 클락(Andrew Clark)과 댄 아브라모프(Dan Abramov) 또한 이 방식을 주로 사용한다.

Props

Props는 Properties를 줄인 말로 컴포넌트의 속성을 의미한다. Props를 사용하면 컴포넌트를 사용할 때 임의의 값을 넣어줄 수 있다. 위에서 만든 Greeting 컴포넌트에서는 '함수 컴포넌트'라는 고정된 텍스트를 보여줬다. Props를 사용해 '컴포넌트'부분을 동적으로 바꾸는 방법을 알아보겠다.

Greeting 컴포넌트에 name이라는 Props를 추가한다. 컴포넌트를 다음과 같이 수정한다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <View>
      <Text>함수 {props.name}</Text>
    </View>
  );
}

export default Greeting;

함수에서 props라는 파라미터를 설정하고 기존에 '컴포넌트'가 있던 부분을 {props.name}으로 교체했다. JSX에서 자바스크립트 표현식을 보여줘야 할 때는 이렇게 중괄호로 감싸서 작성하면 된다. 여기서 자바스크립트 표현식은 연산 결과, 함수 호출, 특정 변수 또는 상수를 말한다.

다음과 같은 코드를 예로 들 수 있다.

// 예시 코드
function getDifference(a, b) {
  return a - b;
}

function Sample() {
  const value = 'hello';
  const user = {
    name: 'John Doe'
  };
  return (
    <View>
      <Text>{1 + 1}</Text>
      <Text>{value}</Text>
      <Text>{user.name}</Text>
      <Text>{getDifference(5,4)}</Text>
    </View>
  )
}

이제 Greeting 컴포넌트를 사용할 때 name 값을 적용해 사용해본다. App 컴포넌트를 다음과 같이 수정한다.

// App.js
import React from 'react';
import {SafeAreaView} from 'react-native';
import Greeting from './components/Greethig';

const App = () => {
  return (
    <SafeAreaView>
      <Greeting name="Props" />
    </SafeAreaView>
  );
};

export default App;

name 값을 Props로 설정했다.

defaultProps

만약 컴포넌트에 Props를 지정하지 않았을 때 사용할 기본값을 설정해주고 싶다면 defaultProps를 사용하면 된다.

App 컴포넌트에서 Greeting 컴포넌트를 사용할 때 지정한 name 값을 한번 지워본다.

<Greeting />

그러면 name 값이 존재하지 않기 때문에 '함수'라는 문구만 나타나게 된다. 이렇게 name 값이 존재하지 않을 때 기본적으로 넣어주고 싶은 값을 지정해본다.

Greeting 컴포넌트 파일을 열어 컴포넌트 코드 하단에 다음과 같이 defaultProps를 설정한다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <View>
      <Text>함수 {props.name}</Text>
    </View>
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;

name의 기본값을 '리액트 네이티브'로 지정했다. 코드를 저장하면 에뮬레이터에 '함수 리액트 네이티브'라고 화면에 나온다.

JSX 문법

JSX를 사용할 때 반드시 지켜야 하는 문법

태그를 열면 반드시 닫아주기

특정 내용을 홑화살괄호(<>)로 감싸준 것을 태그라고 부른다. 만약 <Text>안녕하세요</Text>라는 JSX 코드가 있다면 <Text>는 '태그의 시작'으로 여는 태그이고, </Text>는 '태그의 끝'으로 닫는 태그이다.

태그를 열었으면 꼭 닫아줘야 한다. 만약에 닫지 않으면 오류가 발생한다. Greeting 컴포넌트에서 Text 컴포넌트의 닫는 태그인 </Text>를 지운 뒤 어떤 결과가 나타나는지 확인해본다.

태그를 닫지 않으면 빨간색 화면이 나타나면서 'Expected corresponding JSX closing tag for <Text>' (태그를 닫지 않았을 때 나타나는 오류로  닫는 태그가 없다고 오류가 난다.)라는 오류가 나타난다. 이는 리액트 네이티브 개발 환경에서 나타날 수 있는 오류다. 오류 화면을 확인한 뒤 다시 닫는 태그</Text>를 복구한다.

리로드(Reload)

코드를 복구하고 저장해도 오류 화면이 계속 나타나면 하단의 Reload 버튼을 누른다.  단축키를 이용해 바로 리로드할 수도 있다.iOS에서는 (⌘)Command key + R, 안드로이드에서는 R을 두 번 누르면 된다.
또는 iOS에서는 (⌘)Command key + D, 안드로이드에서는 (⌘)Command key + M
(윈도우와 리눅스에서는 Ctrl + M)을 눌러서 개발자 메뉴를 띄운 다음 Reload를 눌러도 된다.

Ctrl + M

스스로 닫는 태그 사용하기

여는 태그와 닫는 태그 사이에 별도의 내용을 넣어야 할 필요가 없을 때는 스스로 닫는(Self-closing)태그를 사용한다.

다음과 같이 여는 태그의 뒷부분에 / 문자를 넣으면 별도로 닫는 태그를 입력하지 않아도 된다.

<Greeting />
반환할 땐 꼭 하나의 태그로 감싸기

컴포넌트에서 JSX를 반환할 때는 꼭 하나의 태그로 감싸져 있어야 한다. 

예를 들어, Greeting 컴포넌트의 View 아래에 새로운 Text 컴포넌트를 넣어본다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <View>
      <Text>함수 {props.name}</Text>
    </View>
    <Text>Extra Text!</Text> // 새로운 Text 컴포넌트
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;

그러면 빨간 오류 화면이 나타난다. (감싸져 있어야 하는 태그)

‘Adjacent JSX elements must be wrapped in an enclosing tag’라는 오류가 나타났는데, 이 상황을 해결하는 방법은 두 가지가 있다.

첫 번째 방법은 새로운 View 컴포넌트를 작성해 그 사이에 기존 내용들을 넣는 것이다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <View>
      <View>
        <Text>함수 {props.name}</Text>
      </View>
      <Text>Extra Text!</Text>
    </View>
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;

하지만 이렇게 해결하면 불필요한 View 컴포넌트를 하나 사용하게 되므로 나중에 레이아웃과 관련해 작업할 때 귀찮은 일이 발생할 수도 있다. 이보다 더 좋은 방법은 JSX Fragment를 사용하는것이다. 사용 방법은 그냥 빈 태그를 사용하면 된다.

// components/Greeting.js
import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <>
      <View>
        <Text>함수 {props.name}</Text>
      </View>
      <Text>Extra Text!</Text>
    </>
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;
JSX 안에서 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸기

위에서 Greeting 컴포넌트에서 Props를 다룰 때 Props를 JSX에서 보여주기 위해 다음과 같이 중괄호로 감싸줬다.

<Text>안녕 {props.name}</Text>

이렇게 여는 태그와 닫는 태그 사이에 자바스크립트 표현식을 사용할 때 중괄호를 사용한다. 추가로 컴포넌트 Props를 설정할 때도 자바스크립트 표현식을 사용해야 한다면 중괄호를 사용해야 한다.

예를 들어, App 컴포넌트에서 Greeting 컴포넌트에 name 값을 넣어줄 때 텍스트를 직접 넣는게 아니라 특정 자바스크립트 표현식을 넣어야 할 경우 : 컴포넌트의 Props를 설정할 때도 자바스크립트 표현식을 사용할 때는 중괄호 값을 감싸주면 된다.

// App.js
import React from 'react';
import {SafeAreaView} from 'react-native';
import Greeting from './components/Greethig';

const App = () => {
  const name = 'JSX';
  return (
    <SafeAreaView>
      <Greeting name={name} />
    </SafeAreaView>
  );
};

export default App;

주석 작성하기

JSX 코드에 주석을 작성하고 싶을 때는 다음과 같이 작성한다.

/* 주석 작성하기 */
const App = () => {
   const name = = 'JSX';
      return (
         <SafeAreaView>
            <Greeting
            name={name} // 이름 설정
            />
         </SafeAreaView>
   );
};

JSX에서 주석을 작성하는 방법은 두 가지이다.

  • {/* 와 */} 사이에 주석을 넣는 것이다.
  • // 문자를 사용해 주석을 작성하는 것이다. JSX의 여는 태그 또는 스스로 닫는 태그에서만 사용할 수 있으며, 이 주석을 작성한 다음에는 꼭 새 줄을 입력해줘야 한다.

'Framework | Library > React Native' 카테고리의 다른 글

[React Native] error: Command failed with exit code 1.  (0) 2022.09.30
[React Native] Delete 'CR' eslint(prettier/prettier)  (1) 2022.09.29
[React Native] 공부(Android Studio, VSCode, Node.js, npm, yarn, Chocolatey, ESLint, Prettier, 번들링)  (0) 2022.09.28

티스토리툴바