00 오리엔테이션

01 React 프로젝트 생성

설치한 라이브러리를 프로젝트 내에서 불러오기

import <패키지명>
  //css나 import하는 것 만으로 역할을 하는 라이브러리
import something from <패키지명>
  //기본 할당할 이름을 작성해준다.
import { a,b } from <패키지명>
  //패키지 내 일부 메소드나 변수만 가져올 때 구분할로 효율적이게!
import * as something from <패키지명>
  // 패키지에 default로 export되는 객체가 존재하지 않을 경우  * as 이름  으로 불러올 수 있다.
  

CSS불러오기

import "./App.css";

확장자명인 css까지 다 써줘야 js파일이 아닌 줄 안다.

02 jsx

jsx란

• jsx는

jsx는 Babel에 의해서 Transcompile된다.

• 개발자에게 html과 비슷한 환경을 제공하여 편의성 향상
  _ 협엽에 용이/ 생산성 향상 : 비전문적 협업자들도 덜 복잡한 코드를 해석할 수 있게 함

jsx 장점

html과의 차이점

• class 대신 className 으로
• 인라인 스타일 지정시 object로

<div className = 'greeting' style= {{padding:10px, backgroundColor:'red'}}>
  
  //첫번째 중괄호 == 여기서부터 js 표현을 사용하겠다.
  // 두번째 중괄호 == js object의미이다.
  
  //inline style의 속성명은 camelCase로 적는다. 

• 닫는 태그 필수
  input, br, img 등 닫는 태그 없는 html용 태그를 사용시에 처럼 닫는 태그 필수
• 최상단 element는 반드시 하나
  <div> 또는 <>(react.fragment)를 이용해 감싸면
  실제 렌더링 시에는 fragment 안에 있는 내용만 출력이 된다.
• 주석 처리
  {/* 주석을 적어주세요 */}

  html을 jsx로 변환할 때

//reactdom의 render라는 메서드 살펴보기 
ReactDOM.render(렌더링할 요소, 렌더링할 위치);

//앱 배포시 캐시가 남지 않도록 하는 코드
serviceWorker.unregister();

03 컴포넌트

component란?

1. 리액트에서 페이지를 구성하는 최소단위
2. component이름은 대문자로 시작
3. 클래스 컴포넌트 / 함수형 컴포넌트로 나뉨

//class component : 거의 안씀
class Hello extends Component {
  render() {
    const {name } = this.props
    return <div>{name}아, 안녕</div>
  }
}

//function component
const Hello = (props) => {
  const { name } = props
  return <div>{name}아, 안녕</div>
}

4. Controlled Component / Uncomponent Component

component의 특징

• 컴포넌트의 attribute에 해당하는 부분을 props라고 한다.
• 컴포넌트 안에 작성된 하위 element를 children이라고 한다. 이도 props 중 하나이다.