[React] React.js에서 사용하는 기본 개념

 

1. JSX

JSX란 React에서 사용하는, 확장된 javascript 문법이다. JS + XML이라고 생각하면 적당할 정도로, 마크업 언어와 같이 태그를 주로 사용한다. 

const element = <h1>Hello, world!</h1>;

 

[React 공식 홈페이지 - JSX 소개]

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

2. 익명 함수와 화살표 함수 / 즉시 실행 함수

두 함수 모두 javascript에서 사용되는 형태의 함수로, 즉시 실행이 필요할 때 많이 쓴다. python이나 java의 lambda 함수와 비슷하다.

익명함수는 말 그대로 이름이 없는 함수로,  function이라는 js의 예약어를 사용해 선언한다.

화살표 함수는 주로 콜백 함수를 쓸 때 많이 쓰는데, '() =>' 형태를 통해 선언한다. 화살표 함수 내에 사용되는 파라미터가 1개인 경우, 괄호를 쓰지 않고 해당 파라미터 하나만 쓸 수도 있다.

두 함수 모두 특정 변수에 대입해 쓸 수도 있고, 즉시 실행 함수, 즉 별도의 변수 대입 없이 해당 코드 라인 내에서 즉각적으로 실행되고 이후엔 사라지는 형태로 쓰일 수도 있다.

export default function App() {
    return (
        <View>
            <Text>
                // JSX의 태그 사용 시 js 문법을 사용하려면 {}를 쓴다
                {function() { // 익명 함수 선언
                    // ... 
                    return 'Hello World!\n';
                }()} // 익명함수를 즉시 실행하기 위해 함수 뒤에 ()를 사용
            </Text>
            <Text>
                {(() => { // 화살표 함수 선언
                    // ...
                    return 'Hello World!\n';
                })()} // 화살표 함수를 ()로 한번 더 감싼 후 ()를 붙여 함수 즉시 실행            	
            </Text>
        </View>
    );
}

 

3.  JSX의 style

JSX에서 태그 안에 사용하는 인라인 스타일링은, 기존 HTML에서 태그 내 문자열을 사용해 적용했던 것과는 달리, 객체 형태로 입력해야 하고 또 style 속성 이름은 하이픈('-')을 사용하지 않는 Camel Case로 사용한다. 

const default function App() {
	return (
    	<View 
        	style = {{
            	backgroundColor: '#ffffff',
                alignItems: 'center',
        	}}
        >
        </View>
    );
}

const default function App() {
	return (
    	<View style={styles.mainView}></View>
    );
}

const styles = StyleSheet.create({
  mainView: {
    backgroundColor: '#ffffff',
    alignItems: 'center',
  }
}

첫 번째 예시처럼, style에 직접 js 객체를 바로 선언해 넣을 수도 있고, 두번째 예시처럼 다른 변수로 선언한 StyleSheet 객체에서 style 값을 불러올 수도 있다.

 

 

4. props vs. state

props는 properties라는 뜻의 약자로, 부모 컴포넌트에서 자식 컴포넌트로 어떤 속성 값을 넘겨줄 때 사용하는 값들을 뜻한다. 즉, 외부에서 값을 들여와서 컴포넌트 내부에서 그 값을 사용하기 위해 props를 받는 것이다.

// title과 content가 props에 해당
const Parent = () => {
    const title = "jemok";
    const content = "neyong";
    return (<Child title={title} content={content}/>);
};

const Child = ({title, content}) => {
    return (<div> {title} <br/> {content} </div>);
};

 

반면, state는 말 그대로 '상태'라는 뜻으로, 컴포넌트 내부에서만 사용할 특정한 상태를 나타내는 값을 뜻하며, 외부에서는 확인할 수 없는 값이다. 클래스형 컴포넌트에서는 constructor를 작성해 사용해야 했지만, 함수형 컴포넌트로 오면서 react의 Hook 중 'useState'라는 함수만 사용하면 간단하게 state를 사용할 수 있다. 

import React, { useState } from 'react';

const Compo = () => {
    // 기본값을 0로 설정해 state에 반환해주고, setState라는 함수를 반환해 state 값 설정에 사용
    const [state, setState] = useState(0);
    setState(11);
    return ( <div>{state}</div> );
};

컴포넌트 내부에서 쓰는 용도라면, 일반 변수를 선언(let, var)해서 사용해도 될 것 같은데, 굳이 state를 사용하는 이유는 state 값이 변경될 때마다 HTML이 자동으로 다시 렌더링 되기 때문이다.