JSX

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다.
HTML과 비슷한 형태를 띄고 있으나, 원형은 JavaScript이며 HTML과 다름.

JSX는 Babel에 의해서 Transcompile 된다. (생산성 향상)

JSX

<div className='App'>
	<header className='App'>
    	<img src={logo} className='App-logo' alt='logo' />
        	<h1 className='App-title'>Welcome to React</h1>
    </header>
    <p className='App-intro'>
    	Hello World
    </p>
</div>

JS (Babel으로 변환된 JS 코드)

react.createElement('div', {
	className: 'App'
}, React.createElement('header', {
	className: 'App-header'
}, React.createElement('img', {
	src: logo,
    className: 'App-logo',
    alt: 'logo'
}), React.createElement('h1', {
	className: 'App-title'
}, 'Welcome to React')), React.createElement('p', {
	className: 'App-intro'
}, 'Hello world'));

JSX의 장점

1. 개발자의 편의성을 향상시켜준다.
2. 협업에 용이(개발자가 아닌 동료의 이해도)하며, 생산성을 증진시켜준다.
3. 문법 오류와 코드량이 감소된다.

JSX의 특징

HTML 태그 내에 JavaScript 연산이 가능하다.

HTML+JS의 경우

<div>
    <span id='a'></span> +
    <span id='b'></span> =
    <span id='sum'></span>
</div>
<script>
    const a = 3;
    const b = 6;
    document.getElementById('a').innerHTML = a;
    document.getElementById('b').innerHTML = b;
    document.getElementById('sum').innerHTML = a+b;
</script>

JSX

const App = () => {
	const a = 3;
    	const b = 6;
        return <div>{a} + {b} = {a+b}</div>
}

차이점

1. class => className으로 입력

(
<div className='greeting' style={{padding:10, color: 'red'}}>
    {name}님 어서오세요. <br/>
    환영합니다.
</div>
)

주의점: 위와 같이 Inline style의 Propery name은 camelCase로 작성한다.
(e.g. font-size -> fontSize, padding-left -> paadingLeft)
2. 스타일은 자바스크립트 object로 작성한다.

style={{padding:10, color: 'red'}}

style의 첫번째 중괄호로 자바스크립트 코드임을 알리고, 자바스크립트 오브젝트 형태로 작성.
3. 닫는 태그가 필수적이다.

<div>
    <input type='text'/>
    <br/>
</div>

4. 최상단 element는 반드시 하나여야 한다.

const App = () => {
    return (
    	<> {/* React.Fragment */}
       	    <div>Hello</div>
            <div>World</div>
        </>
    )
}

JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에 이를 div 또는 React.Fragment를 이용해 감싼다. 실제 렌더링 시에는 Fragment 안에 있는 내용만 출력된다.

Component

React에서 페이지를 구성하는 최소단위

const MyComponent = ({ children }) => {
   return <div style={{
   	padding: 20, 
    color: 'blue'
  	  }}>
}

const App = () => {
    return (
    	<div>
            <p>안녕</p>
            <MyComponent>여기</MyComponent>
            <div>바이바이</div>
        </div>
    );
}

Component의 이름은 대문자로 시작한다. (html태그와 구분한다)

Class Component/ Function Component로 나뉜다.

Class Component

class Hello extends Component {
  render() {
    const { name } = this.props;
    return <div>{name}님 어서오세요.</div>
  }
}

Function Component

const Hello = (props) => {
    const { name } = props;
    return <div>{name}님 어서오세요.</div>
}

초기 React의 Component는 모두 Class Component였으나, v16버전 부터 새로운 Function Component와 Hooks 개념이 발표되고 난 후, 현재는 Function Component가 주로 사용되고 있다.

Class Component 특징

1. Class 개념이 많이 활용되는 Java 개발자에게 친숙한 형태
2. React의 생명주기를 파악하기 쉽다.

Component의 특징

<MyComponent user={{name: '민수' }} color='blue'>
  <div>안녕</div>
</MyComponent>

컴포넌트에 Attribute에 해당하는 부분을 Props(Properties)라고 한다.
컴포넌트 안에 작성된 하위 Element를 children이라고 하며, children도 props 중 하나이다.

const MyComponent = (props) => {
  const { user, color, children } = props;

  return (
    <div style={{ color }}>
      <p>{user.name}의 하위 요소는</p>
      { children }
    </div>
  )
}

컴포넌트의 자식(children)요소도 props로부터 값을 받아온다.

• 컴포넌트끼리 데이터를 주고받을 땐 props 사용
• 컴포넌트 내에서 데이터를 관리할 땐 state 사용
• 데이터는 부모 -> 자식으로만 전달된다.

Controlled Component/ Uncontrolled Component

• Controlled Component: 각 Input들의 데이터를 state를 이용해 직접 관리하는 컴포넌트
• Uncontrolled Component: 데이터를 리액트로 관리하지 않고, 필요할 때 Element로 부터 불러오는 컴포넌트

한줄 평: React를 잘 활용하려면, JSX와 Component의 개념을 잘 이해하고 짚고 넘어가는 것이 중요하다는 것을 배웠다.