React 알아보기

 

 

React 공식 홈페이지: ko.reactjs.org/

 

쉽게 말해 프론트 엔드 개발에서 JavaScript를 이용하여 화면을 구성할 수 있는 '라이브러리'입니다.

이와 비슷한 프레임워크로는 Vue, Angular등이 있죠

 

리액트는 Facebook에서 만들었고 2013년에 발표가 되었습니다.

그동안 수많은 버전 업데이트를 통해 벌써 17.0.1버전이 나왔습니다.

 

리액트로는 크게 3가지 작업이 가능합니다.

1. 작은 단위의 컴포넌트들을 구성하고 재사용한다.

2. 상태에 따라 화면을 변경

3. 모바일 앱 개발

 

1] 컴포넌트 재사용

홈페이지 화면에도 나와있듯이 리액트는 컴포넌트 기반입니다.

예를 들어 아래와 같은 빨강색 버튼이 있다고 합시다.

<button style='color: red;'>버튼</button>

html은 이를 여러 줄로 계속 작성해야(혹은 여러줄 복사 붙여넣기) 하는 반면에,

리액트에서는 이를 함수로 작성하여 함수만 계속 호출해주는 방식으로 여러 번 사용이 가능합니다.

 

1) html

 <button style='color: red;'>버튼</button>
 <button style='color: red;'>버튼</button>
 <button style='color: red;'>버튼</button>
 <button style='color: red;'>버튼</button>
 <button style='color: red;'>버튼</button>
                    .
                    .
                    .

 

2) React

// Button.js
export default function Button() {
  return (
    <div>
      ...
      <button style='color: red;'>버튼</button>
      ...
    </div>
  );
}

app.js라는 파일에서 다음과 같이 호출하면 버튼이 여러 개 나옵니다.

import React from 'react'
import Button from './Button'
// js, ts, tsx 파일의 확장자는 생략가능

export default function App() {
  return (
    <div>
      	...
      <Button />
      <Button />
      <Button />
      <Button />
      	...        
    </div>
  );
}

 

지금은 너무나 작은 단위여서 왜 이렇게 사용해야하지?라는 생각이 들 수도 있습니다.

그러나 한 페이지 안에 내용이 많아지거나 서비스의 규모가 커지는 경우에는 이렇게 컴포넌트들을 쪼개서 재사용하여 코드의 길이를 줄일 수 있습니다.

 

2] 상태에 따라 화면 변경

 

버튼을 눌렀을 때 색깔을 파랑색으로 바꾸고 싶다고 하면

 

jQuery로 예를 들면 이런식으로 바꿨을 겁니다.

$(button).css({ ... })

(사실 안 쓴지 2년넘어서 기억이 잘 안 나네요 ㅠ)

 

import React, { useState, useCallback } from 'react'

export default function Button() {
    const [color, setColor] = useState(false)
    const onChange = useCallback(() => setColor(color => !color), [])
    
    return (
    	<div>            
          ...
          <button style=`color: ${color ? 'blue' : 'red' }`
            color={color} onClick={onChange}
          >
            버튼  
          </button>
          ...
        </div>    
    );
}

 

이렇게 작성하면 버튼을 클릭했을 때마다 빨강과 파랑으로 전환될 겁니다.

 

또한 상태는 사용자 정의로 어떤 것이든 만들 수 있습니다.

import React, { useState } from 'react'

export default function App() {
  const [n, setN] = useState(0)
  const clickHandler = () => setN(n + 1)
  // clickHandler는 액션
  return (
    <div onClick={clickHandler}>
      {n >= 2 ? '무엇을 원하세요?' : ''}
      // 여기서 n은 조건
      // n이 2보다 크거나 같으면 글자 출력하고 작으면 글자 출력 안함
    </div>
  );
}

이와 마찬가지로 상태에 따라서 태그를 변화시켜주면 실제 브라우저에서도 화면이 변하게 됩니다.

 

3] 모바일 앱 개발

React로는 모바일 앱 개발도 하는데요

정확히는 React Native (보통 줄여서 RN이라고도 함)라는 프레임워크입니다.

 

React기반이며 RN은 cross-platform을 지원합니다.

웹은 물론이고 TV, Android, iOS 등을 지원합니다.

모바일의 경우 구글플레이와 앱스토어에 출시도 가능합니다.

또한 국내에서 React Native 일자리가 빠르게 증가하고 있습니다.

 

단순히 웹 페이지에 모바일용 화면을 구성한다고 하면 @media를 이용하면 되지 않느냐라고 하실 수도 있지만

간단하고 다양한 기능이 있으며 한번의 작성으로 모든 플랫폼에서 동작할 수 있는 React-Native가 더 좋습니다

 

import React from 'react'
import { View, Text, StyleSheet, Platform } from 'react-native'

// div : View, p : Text, css : StyleSheet
// 비슷한 역할을 한다

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{Platform.OS === 'android' ? '안녕하세요!' : 'Hello React Native!'}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});