React란??

페이스북에서 만든 js 웹프레임 워크이며 정말 많이 사용된다.

NPM vs YARN??

이 둘은 라이브러리, 모듈들을 쉽게 설치 관리하게 해주는 패키지들이며,
앞으로의 교육에서는 성능이좋고 크기가 작은 YARN을 사용해 줄 것이다.

---

리액트 프로젝트 시작하기

1) Node js 설치

• 구글링을 통해 최신버전을 설치한다.

2) yarn 설치

• vs코드 내에서 터미널 창을 열고 다음 명령어를 입력한다.

yarn add global crete-react-app

3) CRA (react app 폴더 생성)

• 해당 터미널에

yarn create react-app your-app-name

---

Component??

컴포넌트는 재사용 가능한 UI를 나타내는 React의 핵심 요소입니다
리액트 구조는 모두 Component로 이루어진다.

props??

React 컴포넌트 간에 데이터를 전달하고 부모 컴포넌트에서 자식 컴포넌트로 정보를 전송하는 데 사용되는 객체입니다.

---

리액트에서 styling

1. 인라인 styling

import React from "react";

function Hello(){
 	return(
    	<>
      		<div style ={{width: "100px", height: "150px"}}>
      			Hello World!
      		</div>
      	</>
    )
}

2. Styled-component

사용법1)
styled-component 모듈 설치

yarn add styled-components

사용법2)
코딩하기

import styled from "styled-components";

function testCompoent(){
	
    const StyledButton = styled.button`
    	color: red;
        background-color: royalblue;
    
    `;

}
	return <StyledButton> 나만의 버튼 </StyledButton>;

주의 사항 :

styled 컴포넌트도 컴포넌트이기 때문에 앞에 알파벳을 대문자로 사용해야 한다!!!