React 사용하기

git bash에서...
yarn create react-app 프로젝트명
-> 이러면 yarn이 프로젝트에 필요한 이것저것들과 프로젝트폴더를 만들어준다.
-> 이렇게 만들어진 폴더 안에는 리액트를 시작하기에 충분한 녀석들이 다 들어온다.

프로젝트 폴더 안에 src, public, node_modules 폴더가 있는데 우리는 src 안에 필요한 부분을 코딩하게 될 것이다.

이렇게 만들어 둔 프로젝트명 안에서 yarn start 를 입력해 리액트를 시작하라고 한다.

모든 웹은 시작할때 index.html을 바라본다
근데 index.html에 id가 root인걸 물고오는게 있네?
그 물고오는게 index.js 고 idnex.js 는 App.js를 가져온다.

// import 관련 부분
import React from "react";

const App = () => {
  
  // javascript 관련 코드
  
	return
  	  <div>
      	// jsx 관련 코드
      </div>;
};

export default App;

이것이! react 의 기본 구조이다.

리액트는 모든것들이 컴포넌트화 되어있다.
같은 역할의 컴포넌트를 폴더에 따로 떼어둘 수 있다.
결국 리액트개발은 컴포넌트를 만든다고 볼 수 있다.

리액트의 화면 렌더링을 하는 기준?
-> props가 변경될 때, state 값이 바뀔 때

props 란?
부모컴포넌트 -> 자식컴포넌트 로 값을 전달하는 것.

state 란?
const [state, setState] = useState();
useState 로 state,setState 를 묶어줘서 setState로 인해 state가 값이 변경되면 리액트는 state값이 변경된 것을 알 수 있다.

우리는 state를 직접 변경할수는 없다.

이런식으로 못한다는 이야기.

그러면 어떻게??

이런식으로.
plus, minus 함수를 만들어 count를 +,- 를 작동하게 해준다
그 후 button에 onClick을 통해 plus, minus 함수를 연동?시켜준다.

function 이름으로 달고있는게 컴포넌트 (여기서는 App)

그리고 CreateTodoForm 에 onSubmitHandler 라는 녀석(props)을 handleOnSubmit 으로 줬다.

이렇게 컴포넌트 안에 들어간 (여기서는 추가하기) 녀석은 자동적으로 children 이라는 이름으로 props함

삭제하기

CardSection 안의 값으로 먼가 했을것!
아마 section 의 work,done 으로?

Todo 안의 속성으로 넣어준 녀석들이 모두 props 다!!

팁!
jsx 와 js 파일의 기능상의 차이는 없다.
리액트는 근데 컴포넌트가 들어가니까 jsx로 만들어주자!