[React] 특징과 JSX 문법

 

React

프론트엔드 개발을 위한 JS 오픈소스 라이브러리

React 3가지 특징

1. 선언형(Decalarative) : 한 페이지를 보여주기 위해 HTML, CSS, JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX(HTML, JavaScript 결합한 문법)를 활용한 선언형 프로그래밍을 지향

2. 컴포넌트 기반(Component-Based) : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둠 (컴포넌트로 분리하면 서로 독립적이고 재사용 가능, 기능 자체에 집중하여 개발 가능)

3. 범용성 : JavaScript 프로젝트 어디에든 유용하게 적용 (Facebook에서 관리되어 안정적이고, 유명하고, React Native로 모바일 개발도 가능)

JSX 주요 문법

JSX (JavaScript XML) : React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법 단, 브라우저가 바로 실행할 수 있는 JS코드는 아님

JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일을 해주어야한다. (=Babel)

1. 여러 엘리먼트를 작성하고자 하는 경우

최상위에서 opening tag와 closing tag로 감싸주어야한다.

<div>
    <div>
        <h1>hello</h1>
    </div>
    <div>
        <h2>hello</h2>
    </div>
</div>

2. React에서 class 속성 지정하기

"className"으로 표기해준다.

"class"로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 class로 받아들인다.

<div className="greeting">Hi!</div>

3. JSX에서 JavaScript를 쓰고자 할 때, 중괄호를 이용한다.

사용하지 않을 땐 일반텍스트로 인식한다.

function App () {
	const name = 'coding'
	return {
    	<div>
        Hello, {name} // 중괄호 이용!
        </div>
    }
}

+ style 속성을 넣을 때!

style = {스타일명 : '값'}
// 스타일명 : 카멜케이스 사용 (하이픈 X -> JS에서는 빼기로 인식)
// 값 : 작은따옴표로 감싸주기
<h4 style = { {color : 'red', fontSize : '16px'} }

4. 사용자 정의 컴포넌트는 대문자로 시작한다. (PascalCase로 작성)

소문자로 시작하면 일반적인 HTML로 인식한다.

function Hello () { // 대문자 사용!
	return <div>Hello!</div>;
}

function HelloWorld () { // 대문자 사용!
	return <Hello /> // 대문자 사용!
}

5. 조건부 렌더링은 삼항연산자를 사용한다.

function App() {
  const name = 'coding';

  return (
    <div>
    	{(name === 'coding') ? (<h1>맞음!</h1>) : (<h1>아님!</h1>)}
    </div>
  );
}

6. 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 메서드를 사용한다.

map 함수 사용 시 "key" JSX 속성을 넣는다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

https://ko.legacy.reactjs.org/docs/hello-world.html

Hello World – React