ReactJS Basic - 2

@노마드코더
🐱깃허브 : ReacJS로_영화 웹 서비스 만들기

• 리액트는 재사용 가능한 컴포넌트를 만들 수 있다.
  - 이말은 즉슨 반복적인 HTML을 할 필요가 없다는 뜻이다.
  
  

컴포넌트끼리 값 주고받기

값 = prop

예제코드

function Food(haha){
	console.log(haha);
	return <h1>I like myself quite a bit...</h1>
}

function App() {
  return (
    <div className="App">
		<h1>Hello!!</h1>
		{/* Food 컴포넌트에 정보를 넘긴다 */}
		<Food
		fav="samgyeobsal"
		exist={true}
		etc={["123", "anything", true, 456]}
		/>
    </div>
  );
}

export default App;

값을 가져오는 방법 - 1

function Food(props){
	console.log(props.fav); // 값을 가져온다
	return <h1>I like myself quite a bit...</h1>
}

값을 가져오는 방법 - 2

function Food({fav}){  // 값을 가져온다
	console.log({fav}); // 값을 가져온다
	return <h1>I like myself quite a bit...</h1>
}

컴포넌트의 재사용

예제코드

function Food({fav}){
	return <h1>I like {fav}</h1>
}

function App() {
  return (
    <div className="App">
		<h1>Hello!!</h1>
		{/* Food 컴포넌트에 정보를 넘긴다 */}
		<Food fav="samgyeobsal"/>
		<Food fav="pizza"/>
		<Food fav="beef"/>
		<Food fav="kimchi"/>
    </div>
  );
}

export default App;