React::Counter App

React 프로젝트는 JSX 문법을 사용하여 UI를 작성한다.(보여지는 것을 다룸)HTML보다 엄격하다 \- 닫는 태그 필수 \- 최상위 부모가 딱 하나여야 한다 \- 빈 태그를 사용할 수도 있다.JSX (JavaScript XML)를 React Pro

JavaScript에서 각 파일은 모듈이라고 하고, 각 컴포넌트는 각자의 모듈에 있어야 한다 .app.jsx 에 있던 컴포넌트 들을 파일을 만들어 분리시켜줬다.외부의 컴포넌트들을 import시켜주었다외부에서 import 할 수 있게 export default를 써주어야

이벤트를 추가할 때 onClick={incrementCounterFunction} 처럼 중괄호를 써줘야 한다.요소에서 바로 스타일 정의중괄호를 두개 써줘야 함속성값을 별도의 스타일 객체로 선언스타일 파일 생성Counter.jsxcss 파일 임포트

터미널에 명령어를 입력해서 다운로드 해 준다.BrowserRouter import 후 태그 추가App 태그를 BrowserRouter 코드로 감싸주니 해결Link와 상응하는 Route 코드를 작성해주면 라우터가 생성된다.어떤 컴포넌트를 매핑해서 보여주게 될지 라우터에서

동적으로 변하는 값useState 를 import 해준다\+1을 클릭하면 숫자가 올라가고 -1을 클릭하면 숫자가 내려간다React에서 값을 동적으로 활용하려면 useState를 활용한다num은 기본값을 담은 변수이고 setNumber는 유동적인 값을 가지고 있는 변수이