[생활코딩] React TIL 빠른 정리 #1

공부 전략

CODING -> RUN -> DEPLOY

 

CRA 설치: npm install -g create-react-app

 

CRA 세팅: create-react-app .

 

개발환경 실행: npm run start

 

빌드: npm run build

 

Component들을 id="root"인 곳에다가 넣기로 약속!

대부분의 파일은 src안에 삽입 (css, js) 등등..

 

src의 index.js 내부에 있는 코드
ReactDOM.render(<App />, document.getElementById("root"));
중에서 이 Component임
import componentName from 'link'

 

CRA는 상당히 무거움 1.7mb 정도

빌드를 하게 되면 CRA가 공백과 같이 불필요하게 용량을 차지하는 부분을 삭제함.

---

컴포넌트를 만들때는 최상위 태그로 시작해야 한다.
하나의 최상위 태그만 써야한다.

 

JSX로 코드를 작성하면 CRA가 알아서 converting 해줌

 

props: 개인 지정 attribute
사용법: <tag>{this.props.name}</tag>

 

JSX

JSX는 react를 이용한 코드 작성시 복잡도를 줄이고 가독성을 높히이 위한 JavaScript의 확장 문법이다.

JSX를 이용하려면 몇가지 규칙을 지켜야 한다.

1. 태그가 비어있다면 /> 를 이용해 꼭 닫아주어야 하며, 여러개의 element가 있으면 반드시 하나의 element로 모든 element가 감싸져 있어야 한다.
2. jsx에서 javascript 코드를 적용할 때에는 {}(중괄호)안에 작성한다.
3. 조건부 렌더링을 할 때에는 if문을 사용 할 수 없다. 대신 삼항연산자와 AND 연산자를 사용한다.
4. camelCase: javascript에서 class는 예약어이므로 클래스네임을 지정할 때 class가 아닌 className으로 작성한다. 마찬가지로 클릭이벤트에서는 onclick이 아니라 onClick으로 작성한다.

상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터이다.
따라서 하위 컴포넌트는 단순히 상위 컴포넌트를 사용만 할 수 있고 수정,변경은 할 수 없다.

---

Component 분리

 

export default ClassName