React_코딩애플_Part1

-- 블로그 / 기초 문법

React 사용 이유

1. Single Page Application 만들 기 위해
2. React 쓰면 html 재사용 편리
3. 같은 문법으로 앱개발 가능

파일구조

• node_modules : 라이브러리 코드 보관함
• publoc 폴더 : static 파일 모아 놓는 곳
• src폴더 : 코드 짜는 곳
• package.json : 프로젝트 정보

JSX

• JS에서 사용하는 HTML 대용품

문법
1. class 넣을 땐 className
2. 변수 넣을 땐 데이터 바인딩은 {중괄호}
3. style 넣을 땐 style ={{스타일명 : "값"}}

---

state

변수와 state의 차이점

• 변수는 변경 시 HTML에 자동 반영 X
• state는 변경 시 HTML에 자동 제런더링 O
• state는 자주 변경 되는 것에만 적용, 제목 같은 건 자주 안바뀌어서 상관X

eslint-disable

• React 최상 단에 eslint-disable 작성 시 Lint 꺼짐.

---

Component(컴포넌트)

작성 시기 : HTML을 깔끔하게 작성하고 싶을 때(재사용)

• 컴포넌트 작성 법

  1. Function 만들기!
  2. return() 안에 html 담기!
  3. <함수명></함수명> 쓰기!

• 컴포넌트 사용 시기

  1. 반복적인 html 축약할 때
  2. 큰 페이지 작성 시
  3. 자주 변경 되는 것들

• 컴포넌트의 단점

  1. state 가져다 쓸 때 문제생김(컴포넌트 간 변수 가져다 못씀) / 변수의 범위가 함수에 한정