eadgnus

1. function 만들기

2. return() 안에 html 담기

3. <함수명></함수명> 사용

반복적인 html을 축약할때,

큰 페이지들,

자주 변경되는 것들을 컴포넌트로 만들어 사용하면 좋다.

단점. 

미리 지정해둔 state를 사용하지 못한다.

useState()를 하게되면

상단에 자동으로 입력이 된다.

let var const와 같이 변수처럼 사용

이런식으로 사용

a에 저장이 되고, b는 state의 변경을 도와주는 객체

모두 같다

 변수와 state의 다른점

변수는 갑자기 변경되면 자동으로 변경이 안됨.

state는 자동으로 변경 됨.       

(자주변경되는것은 state로, 아닌것은 변수에)

state변경은 함수이기때문에 이렇게 사용하면 된다.

 css 파일 import해오는 경로

jsx에서는 class가 javascript문법과 겹치기 때문에 className이라고 써야함

중괄호를 사용하면 모든곳에서 변수를 사용할수 있다.(데이터 바인딩)

태그에서 스타일 속성을 줄때는 중괄호 안에 오브젝트형태로 적어주어야함

중괄호 총2번

Node.js 설치후에 가능하다.

먼저 사용할 폴더를 생성후

shift + 우클릭

여기에 PowerShell 창 열기로 터미널 경로를 잡아준다.

그후 이것을 입력하면 되는데 project1부분에는 자신이 원하는 프로젝트 폴더 이름을 넣으면 됨

이렇게 완료가 된다.

에러가 뜬다면

https://codingapple.com/unit/react1-install-create-react-app-npx/?id=2305 

코딩애플님 블로그 확인

이렇게 프로젝트 폴더가 생성이 된다.

그후 들어가보게 되면 src라는 폴더가 생기는데

여기에서 app.js에다가 코드를 짜면 된다.(이곳이 메인페이지)

그후 터미널창을 열고 npm start를 치면 

이렇게 미리보기가 실행이 된다.

이폴더는 프로젝트 구동에 필요한 모든 라이브러리들을 모아놓은 폴더.

public 폴더는

이미지같은것을 잠깐 보관하고 싶을때 사용하는 static폴더.