CODE_PLAN

react tailwind 설치관련 블로그를 보고 

{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

이렇게하라고 나와있어서  이렇게 바꾸고 craco를 설치하니까 

$ npm install @craco/craco
npm ERR! code EJSONPARSE
npm ERR! path C:\프로젝트경로/package.json
npm ERR! JSON.parse Unexpected token "/" (0x2F) in JSON at position 숫자 while parsing near "...ripts eject\"\n  },\n  // \"scripts\": {\n  //..."
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\~~\AppData\Local\npm-cache\_logs\2022-12-06T08_~_~_~~Z-debug-0.log

이런식으로 오류가 나왔었다. 

그래서 맨처음상태로 package.json 코드를 밑과같이 바꾸고 

craco를 설치하니까 오류가 사라지고 설치가 되었다!

https://goddaehee.tistory.com/300

위 내용을 참조

즉, 쉽게말하면  상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용합니다.(단방향 데이터 흐름 갖는다.)

props 사용

리액트는 기본적으로 단방향 데이터 흐름이다.

리액트에서는 변수는 중괄호로 묶어줘야합니다.

나머지 중괄호 하나를 쓰는이유는 object 타입이기 때문입니다.

style ={{}} 이와 같이 중괄호가 두번 들어가는 것이 있는데 이유는 무엇일까요?

이해하기 위해 

즉, 풀어쓰면 이런 뜻입니다.(밑 코드참조)

const style2={
	backgroundColor: blue
}
render(){
	return(
    	<div style={style2}>
        	hello world 
        </div>
    );
}

위의 코드를 봤을 때 style2을 변수니까 중괄호로 한 번 묶어주었고, 저 style1이 곧 위에서 backgroundColor로 쓰여있다보니 이를 처음 코드처럼 풀어쓰게 되면 중괄호로 한 번 더 묶어주는 것입니다.

<결론> 

바깥쪽 중괄호 : 변수 묶어주는것

안쪽 중괄호 : object 타입

import React from 'react';

function App(){
	return(
          <div>
            <h1>리액트<h1>
            <h2>연습<h2>
          <div/>
     );
 }
 export default App;

위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다.

이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유는 

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

React의 불변성

React는 독특하게 업데이트라는 개념을 가지고 있다. 즉 기존의 값을 가져온다음에 바뀔 부분을 고치고 업데이트를 진행한다. 여기서 어려운 부분은 기존의 값을 가져온다는 것

https://velog.io/@hyundong_kk/React-%EB%B6%88%EB%B3%80%EC%84%B1-feat-...%EC%8A%A4%ED%94%84%EB%A0%88%EB%93%9C%EC%97%B0%EC%82%B0%EC%9E%90

참조

https://ljh86029926.gitbook.io/coding-apple-react/undefined/this

,

https://velog.io/@zinukk/%EB%B0%94%EC%9D%B8%EB%94%A9

를 참조했다.