리액트 설치와 세팅
node.js를 설치해야 npm이라는 툴을 사용할 수 있습니다.
npm으로 create-react-app을 이용합니다. 일종의 boilerplate library로, 리액트 사용을 위한 폴더 구성이 완료된 상태로 시작할 수 있습니다.
npm-start 명령어를 터미널에 입력하여 라이브 서버를 띄울 수 있습니다.
App.js : 메인 페이지에 들어갈 html 짜는 곳
pulic/index.html: 메인 페이지
node_modules: 라이브러리 모은 폴더
public: static 파일 보관함(이미지 등 바뀌지 않는 파일들)
scr: 소스코드 보관함
package.json: 설치한 라이브러리 목록
태그에 class 지정하기
JSX에선
형식으로 클래스 지정이 불가능합니다. JSX도 일종의 자바스크립트인데, 자바스크립트에 class라는 문법이 이미 있기때문에 className이라는 키워드를 사용합니다.
<div classNme="클래스명">리액트에서 데이터 바인딩 쉽게 하는 법
{변수명, 함수 등}
서버에서 가져온 데이터를 html에 넣는 것을 데이터 바인딩이라고 합니다. react, vue, algular의 특징은 이 데이터 바인딩이 쉽다는 것입니다.
let posts = "강아지 사진"
function func() {
return 100
}
//바닐라 JS로 데이터 바인딩
document.getElementById().innerHTML. = '' ...
//리액트
<h4> {posts} </h4> //데이터를 보여주고자 하는 자리에 {변수명}으로 삽입
<h4> {func()} </h4> //함수도 가능 JSX에서 style 속성 집어넣을 때
style = { {object 자료형으로 만든 스타일 } }
<div style = { { color:'blue', fontSize:30px} }> 텍스트 </div>! html, css는 font-size라고 표기하지만, 자바스크립트에서 -는 뺄셈 기호로 간주되어 똑같은 속성명을 사용할 수 없습니다.
하이픈(-)을 삭제해야 할 때는 camelCase 작명관습에 따라 속성명을 바꿔줍니다.
참고한 강의&자료 : 코딩애플 리액트 강의
