React 문법

1. class 넣을 땐 className

<div className = "App">

<div className = "black-nav">

2. 변수 넣을 때 {중괄호} 사용

function App() {
	let post = '강남 우동 맛집'
	return (
		<div className = "App">
			<div className='black-nav'>
			<h4>blog</h4>
			</div>
			<h4>{post}</h4>
		</div>
  );
}
			

3. style 넣을 때

style= {{스타일:'값'}}

<h4 style={{color: 'red', fontSize: '16px'}}

👉 ‘-’ : 뺄셈 연산자 → font-size X

state

: html이 자동 재렌더링됨

1. import {useState}
2. useState(보관할 자료)
3. let [작명, 작명]

let [글제목, b] = useState(['1','2','3'])

<h4>{글제목[0]}</h4>

let [글제목, 함수] = useState(['1','2','3'])

<span onClick={()=>{함수()}}></span>

Component

1. function
2. return() 안에
3. <함수명></함수명>

function Modal(){
	return(
		<div className = "modal">
		</div>
	)}
	
	<Modal></Modal>
	<Modal/>

👉return() 안의 병렬 기입위해서는 <div> 대신 <> </>

props

: 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값

특징

• 자식 컴포넌트에서는 읽기 전용. → 함수 컴포넌트, 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정할 수 없음
• 부모 컴포넌트의 props를 변경하면, 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링