<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" width="40px" /> Velopert's Modern React

</aside>

목차

JSX 기본 규칙

Component와 Props

조건부 랜더링 (삼항연산자와 단축 평가 논리 연산자)

JSX 기본 규칙 (Babel을 이용한 JSX의 Javascript화)

• 태그는 반드시 닫혀야 한다. ( < /> : 이것처럼 self-closing으로 닫아 주어도 된다.)

• 전체 태그는 제일 상단에서 하나의 태그 (<div></div> or <></> 등)로 감싸야 한다.

• JSX 내부에서 자바스크립트 코드를 작성하거나 변수를 사용하는 경우 {중괄호로} 감싸준다.

• JSX 태그 안에서 style과 className은 반드시 **camelCase**로 작성해준다.

  const style = {
  	backgroundColor: 'black',
  }
  
  return (
  	<div className = "" />
  )
  

Component에서 props 사용하기

App.jsx

function App() {
	return (
		<>
			<Wrapper >
				<Hello name="react" color="red" /> 
				// -> name, color는 Hello 컴포넌트의 props
			</Wrapper>
		</>
	)
}

Wrapper.jsx

function Wrapper({ children }) {
	const style = {
		border: "2px solid black",
		padding: "16px"
	}

	return (
		<div style={style}>
			{children}
		</>
	)
}

Hello.jsx

function Hello({ name, color }) {
	return (
		<div style={{ color }}> My name is { name } </div>
	)
}

Hello.defaultProps = {
	name: "default-name"
}