[React] 시작하기 💯️

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//2 props를 {name: "sara"}로해서 welcome함수컴포넌트를 호출한다
//3 Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환한다
//4 React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다

const element = <Welcome name="Sara" />;

ReactDOM.render(element, document.getElementById('root'));
// ReactDOM.render()로 element를 호출한다.
//1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출한다  ????????????
-------> 1번을 정확히 모르겠음...

React 시작하기 (with Nomad coder) 💯️

1. 설치해보자

• node.js / npm / npx / create-react-app 설치하기
• create-react-app : React Web App의 기본 셋업을 해준다
• npx create-react-app [폴더명]
  • npx create-react-app movie-app 으로 세팅하면 새로운 파일들이 설치된 것을 확인할 수 있다.
• [해당 폴더]로 들어가서 npm start하면 성공적으로 컴파일되었다는 문구와 함께 브라우저에 띄운다.

2. 만든 파일을 github repo에 넣어보자

• [해당 폴더]에서 git init을 실행하면, ~안의 기존 깃 저장소를 다시 초기화했습니다라는 문구가 뜬다.
• github에 들어가서 새로운 repo를 생성한 후, url을 복사한다.
• 다시 터미널에서, git remote add origin [복사한 url] 으로 원격의 저장소를 추가한다.
• git status로 변경 상태 확인 / git add .로 변경사항 추가 / git commit -m "추가할 메시지" 로 커밋 / git push origin master로 깃에 푸시

3. react가 동작하는 방식

• react는 소스코드에 처음부터 html을 넣지 않고, html에서 html을 추가 or 제거한다.
  => virtual DOM을 만든다. (빠름)

4. 해당 repo에 주석으로 자세한 설명 덧붙임 > 여기를 참고

나만 헷갈렸던 사소한 문법들 💯️

• index.js > App.js > Food.js > Kimchi.js

// App.js
...
render() {
    return (
        <Food 
          name = "Kimchi"
          color = { [1,2,3] } 	// 배열도 { } 이 안에 담아주어야 한다!
        />
    );
}
...
---------------------------------------------------------------
// Food.js
function Food (props) { 	// props는 obj
    console.log(props) 		// {name: "Kimchi", color: Array(3)}
    return (
    <Kimchi name = "Kimchi" 	// props의 속성은 여기서 쓰지 않더라도 다시 자식에게 전달해주려면 계속 명시주어야 한다.
    color = {[1,2,3, "❌️"]}/> 	// 중도에 이렇게 추가할 수도 있다. 그럼 다음 props에는 추가된 데이터가 들어간다.
    )
}