[week_08] React 기초 Ⅰ(2) JSX와 컴포넌트

1. JSX

• 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장
• HTML과 비슷하게 생겼으나 JavaScript이고, HTML과 다른 부분이 있다.
• JSX는 Babel에 의해서 Transcompile 된다.

1-1. JSX의 장점

1) 개발자 편의성 향상

2) 협업에 용이 / 생산성 향상

3) 문법 오류와 코드량 감소

1-2. JSX의 특징 (HTML과 차이점)

1) HTML 태그 내에 JavaScript 연산

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

2) class ➡ className

(
<div className="greeting">{name}님 안녕하세요.</div>
)

3) 스타일은 object로 작성

(
<div className="greeting" style={{ padding: 10, color: 'red' }}>{name}님 안녕하세요.</div>
)
// 바깥 괄호 : JavaScript 코드임을 알리는 괄호
// 안쪽 괄호 : JavaScript Object의 시작임을 알리는 괄호

• 위와 같은 Inline style의 property name은 camelCase로 적는다. (ex. font-size ➡ fontSize)

4) 닫는 태그 필수

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

5) 최상단 element는 반드시 하나

// 잘못된 예시
const App = () => {
  return (
    <div>Hello</div>
    <div>World</div>
  )
}


// 올바른 예시
const App = () => {
  return (
    <>
      <div>Hello</div>
      <div>World</div>
    </>
  )
}

• JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에, 이를 <div> 또는 <React.Fragment>를 이용해서 감싸줘야 한다.
• 실제 렌더링 시에는 Fragment 안에 있는 내용만 출력된다.
• <React.Fragment>는 간단히 <>로 표기가 가능하다.

 

2. Component

• React에서 페이지를 구성하는 최소 단위
• 사용자 정의 태그

1) Component의 이름은 대문자로 시작

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

2) Class Component / Function Component로 나뉨

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

/* Class */
class Hello extends Component {
  render() {
    const { name } = this.props
    return <div>{name}님 안녕하세요.</div>
  }
}


/* Function */
const Hello = (props) => {
  const { name } = props
  return <div>{name}님 안녕하세요.</div>
}

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

3) Controlled Component / Uncontrolled Component

2-1. Component의 특징

<MyComponent user={{name: "민수"}} color="blue">
  <div>안녕하세요.</div>
</MyComponent>

컴포넌트에서 Attribute에 해당하는 부분을 Props(Properties)라고 한다.

컴포넌트 안에 작성된 하위 Element를 children이라고 한다. 그리고 children도 결국엔 props 중 하나이다.

위의 예시에서 보았을 때, user={{name: "민수"}} color="blue" 부분이 Props가 되고, <div>안녕하세요.</div> 부분이 children이 된다.

const MyComponent = (props) => {
  const { user, color, children } = props
  
  return (
    <div style={{ color }}>
      <p>{user.name}님의 하위 element는</p>
      {children}
    </div>
  )
}

위 코드는 상위 Element 로부터 전달받은 props 를 활용하는 코드이다.

이 컴포넌트의 자식(children) 요소 역시 props 로부터 값을 받아오는 것을 볼 수 있다.

✨ Component의 데이터 관리

1. 컴포넌트끼리 데이터를 주고받을 때는 Props
2. 컴포넌트 내에서 데이터를 관리할 때는 State
3. 데이터는 부모 컴포넌트 ➡ 자식 컴포넌트로만 전달