리액트를 실행하기 위해서는 node.js를 당연하게 설치해야하고,

설치하게 되면 npm 과 npx를 사용할 수 있다

터미널 혹은 cmd에서

npm create-react-app 내가정한폴더명

을 명령하면 내가정한폴더명으로 리액트 프로젝트가 하나가 생성된다(초간단)

생성이되면 내가정한폴더명 디렉토리로 옮겨간후 로컬서버를 띄우면 된다

리액트를 사용하다보면 index.js에 이라는걸 볼 수 있는데 이것은 태그안에 있지만 실제 태그는 아니다.

바로 컴포넌트!

컴포넌트는 html에처럼 보여줄때 필요한 개념이다.

html을 자바스크립트속에 넣어서 보여주는것이다. 이런 js와 html 사이의 조합을 jsx라고 한다.

(리액트가 소개하는 유일한 개념이라고 한다. 나머지는 다 js의 기능 혹은 js에서 확장된 것들)

Btw…뷰랑 똑같다(사실 비슷한게 너무 많아서 놀라는중 하지만 우선 배운건 다 적어놔야지 또 ‘아 그그 그거 그거’하고 싶지 않다. 명확한 명사화가 중요하다)

props는 (뷰에서도 동일하게 사용되지만) 컴포넌트가 가지고 있는 속성들을 보내는 기능을 하는 개념이다

우선 App에서 렌더링되기 때문에 가장 큰 app컴포넌트를 기준으로 만들어보자

funtion Food( { fav } ){
	return "<h1>i luv {fav}</h1>"
}

function App(){
	return (
		<Food fav="eggplant"/>
	)
}

Food컴포넌트에 <h1>i luv {fav}</h1> 를 집어넣음으로서 html을 보여준다.

Food컴포넌트에는 fav라는 속성(eggplant)이 부여되어있다

그걸 받아서 서로 자유자재로 왔다갔다 할 수 있다.

아는 개념인데 막상 적으니까 쓰기 어렵다…🥲