React 프로젝트의 폴더들의 역할
- node_modules
- 프로젝트 구동에 필요한 모든 라이브러리를 보관하는 폴더입니다.
- public
- 정적인( static ) 파일들을 모아놓는 곳 입니다.( html 파일 이나 이미지 파일 등 )
- src
- 코드를 짜는 곳 입니다.( 모든 소스코드가 여기에 들어갑니다. )
- package.json ( 프로젝트 설정 파일 )
- 프로젝트의 정보들이 담겨있습니다.
- 프로젝트의 설정을 변경할 수 있습니다. ( 프로젝트 이름, 버전 등 )
메인 페이지가 html 파일이 아닌 js 파일인데 문제없이 브라우저에 화면이 보이는 이유
- 기본적으로 App.js 에 적힌 html 코드들을 index.js 파일이 public 폴더의 index.html 파일로 집어넣어주기 때문에 가능한 것입니다.
- react 프로젝트에서 html 코드처럼 보이는 것들은 사실 html 코드가 아니라 JSX 라는 언어 입니다. JSX 란 js 파일에서 쓰는 html 의 대용품이라고 생각하시면 되겠습니다.
- 원래 js 파일에서 html 코드를 쓰고싶으면 아래와 같이 작성해야해서 어렵기 때문에 JSX 를 사용합니다. ( 기본적으로 JSX 는 html 과 똑같지만 class 를 사용할때는 class 대신 className 이라고 작성합니다.)
React.createElement('div', null, 'Hello World');
React의 기본문법
- css 를 적용하고 싶다고 하면 App.css 에다가 css 랑 똑같이 작성해주면 됩니다. ( 추가로 상단에 아래의 사진과 같이 App.css 파일을 import 해줘야합니다. )
- 리액트에는 중괄호 문법이 존재합니다. (전문용어로 데이터바인딩 이라고 합니다.)
- 중괄호 문법이란 js 의 변수를 중괄호 안에 적으면 JSX 코드에서 사용가능해지는 문법입니다.
-
- 자신이 원하는 곳 어디에서든 사용가능합니다. ( id 명, class 명 등등)
-
- 또한 JSX 코드상에서 style 로 css 를 적용하고 싶을 때는 아래처럼 중괄호 안에 Object 형식으로 작성합니다.
- JSX 문법에서는 font-size 같이 - 로 이어지는 코드는 fontSize 처럼 카멜표기법으로 사용합니다.
- React 에서 html 코드( JSX ) 를 작성할 때는 반드시 return ( ); 안에다가 작성해야합니다.
- return ( ); 안에는 태그를 2개 이상 기입하면 안됩니다.(1개만)
