TIL_리액트 # 2 | 리액트 특징

1. index.html은 빈 껍데기, 진짜는 App.js에!

2. return 안에서 태그는 하나만 반환한다.

X	O
return () { <div></div> <div></div> }	return() { <div><div></div></div> }

3. 중괄호로 return 밖의 함수(?)를 가져 올수 있다.

진자 템플릿 같은데, 알아봐야겠다.

4. html에서는 class 였지만, 리액트에서는 className이다.

5. 자동줄맞춤 VSCode extension - 'Beauty'

파이참에서는 ctrl alt /로 자동 맞춤 할 수 있었는데, vsc에서는 extension으로 가능하다.

ctrl shift b로 기본 설정되있는데, keyboard shortcut 에서 따로 설정해주면 된다.

blockmonkeys.tistory.com/105

[Visual Studio Code] 자동줄맞춤 플러그인 "Beauty"

 

 

 

리액트 잘게잘게 조각내야함!

그런데 너무 큰애들은 다른데다가 쓰기 어려움 = 재사용성이 떨어진다

container를 쪼갠다. -> 배너 + 텍스트

모든 웹사이트 뷰먼저그린다! (와이어프레임 인듯)

component -> state : component가 가지고 있는 데이터 & props : 부모comp에서 받아온 데이터, 마음대로 고칠 수 없다.

카멜케이스 : camelCase와 같이 띄어쓰기가 아닌 대문자로 가는것

** padding:'20px',**

** display:'flex',**

** width:'100vw', // 화면 배율 100%**

** maxWidth: '400px', // 400이상 커지지 않음**

** margin: '30px auto',**

** flexDirection:'column' // column -> 세로정렬 & row -> 가로정렬**

컴포넌트 종류

1. 함수형 컴포

(1)

function Bucketlist(props){

** return (**

**

버킷 리스트

**

** );**

}

(2)

=> : 화살표 함수

const BucketList = (props) => {

** // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.**

** return (**

**

**

** 버킷 리스트**

** **

** );**

}

export default BucketList;

props는 부모 컴포에게 받아온 데이터

컴포넌트가 있는 whatever.js를 불러올땐

import BucketList from './BucketList';

하고

function App() 안에서는

이라고 태그 형태로 받는다컴포넌트 종류

1. 함수형 컴포

(1)

function Bucketlist(props){

** return (**

**

버킷 리스트

**

** );**

}

(2)

=> : 화살표 함수

const BucketList = (props) => {

** // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.**

** return (**

**

**

** 버킷 리스트**

** **

** );**

}

export default BucketList;

props는 부모 컴포에게 받아온 데이터

컴포넌트가 있는 whatever.js를 불러올땐

import BucketList from './BucketList';

하고

function App() 안에서는

이라고 태그 형태로 받는다

------------------------

// 리액트 패키지를 불러옵니다.

*import React from 'react'; *

// 함수형 컴포넌트는 이렇게 쓸 수도 있고

// function Bucketlist(props){

// return (

//

버킷 리스트

// );

// }

// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.

// 저희는 앞으로 화살표 함수를 사용할거예요.

// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.

// js 함수가 값을 받아오는 것과 똑같이 받아오네요.

const BucketList = (props) => {

** console.log(props)**

** // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.**

** return (**

**

**

** 버킷 리스트**

** **

** );**

}