React TIL #1

📂 React 설치하기

1. node.js 설치

2. yarn 설치

npm 보다 yarn을 추천한다 !

npm install -g yarn

3. 리액트 설치

yarn add global create-react-app
create-react-app [프로젝트명]

---

📂 JSX 란?

Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법

📍 JSX에서는 class가 아닌 className을 사용한다.
📍 JSX에서는 변수를 사용할 때, {}를 사용한다.
📍 하나의 div 태그로 감싸주어야한다.

---

📂 JSX 스타일링

1. 인라인 styling : style = {{속성:'값', ...}}

<div style {{ marginTop: '10px', backgroundColor: 'pink' }}>

2. style 객체 : style = {{style 객체}}

const Pracntice = { ..};
.
.
<div style = {Practice}>
  hello!
</div>

3. css파일 import

비추천 🧟‍♀️

---

📂 styled-component

1. 설치하기

yarn add styled-components

import styled from "styled-components"; //상단에 입력

2. 기본 사용법: Component = styled.element``

const StyledButton = styled.button` 
코드채우고
`;

4. styled-component에서 props 사용하기

const Box = styled.div`
background-color: ${(props => props.bgColor};

5. Custom Component 상속하기

const Box = styled.div`..`;
const Circle = styled(Box)`..`;

✔︎ 참고로 클래스형 컴포넌트 아무도 안씀 -> 함수형 쓰기로~

---

📂 실습