[ 인프런 - 한입 크기로 잘라 먹는 React ] 1. React 기초

인프런 이정한님의 [ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의

---

1. Why React? 

1. React는 Component 기반의  UI 라이브러리이기 때문이다. 
2. React는 선언형 프로그래밍 방식이다. 
3. React는 Virtual DOM을 사용한다. 

---

2. Create React App

# React.js

: Node 기반의 자바스크립트 UI 라이브러리

# Webpack

: 다수의 js파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리

# Babel

: JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 

 

- 모든 패키지(라이브러리)들을 모두 설치하고 이해하는 것은 어려움 

- 부수적인 패키지들은 직접 설치하지 않고 , 이미 자동으로 세팅 완료된 패키지인 Create React App을 사용 

    # Boiler Plate : 마치 보일러를 찍어내듯, 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지를 의미 

 

- react app 설치하기 명령어

      

      

      

    
    

      <javascript />
    
npx create-react-app reactexam1

 

 

- node-modules는 매우 용량이 큰 디렉토리이므로, 깃 등에 프로젝트 공유 시 node-modules 디렉토리를  제외하고 업로드

- App.test.js, reportWebVitals.js, setupTests.js 는 사용하지 않으면 삭제해도 됨 

 

# export default : import 함수명 from * 으로 사용가능

   - 하나의 파일에서 한개만 내보내기 가능

   - export 할 경우에는 import { 함수명 } from * 으로 사용

---

3. JSX

# JSX(JavaScript XML)

: Javascript에 XML을 추가한 확장한 문법
 - 프로젝트를 개발할 때 사용, 공식적인 자바스크립트 문법은 아님

 - 하나의 파일에 자바스크립트와 HTML을 동시에 작성
 - 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉬움 

 

# JSX 규칙

1. 반드시 모든 태그를 닫아주어야 한다.
2. 최상위 태그가 감싸는 형태여야 한다.
3. 자바스크립트 값을 JSX 내부에서 사용할 떄는 중괄호로 감싸주어야 한다.
4. 태그의 class이름 설정 시, class="name"이 아닌 className="name" 식으로 지정해야 한다. 

 

---

4. State 

# state 

- 컴포넌트 내부에서 변경 가능한 데이터를 관리해야할 때 사용 

- props는 (함수 매개변수처럼) 컴포넌트에 전달되어 값의 변경이 불가한 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리하므로 값의 변경이 가능 

- 보통 이벤트와 함께 사용 

- 동적인 데이터를 다룰 때 사용 

- import { useState } from "react"; 

 

- State 선언

      

      

      

    
    

      <javascript />
    
const [count, setCount] = useState(0);

- component는 state가 바뀌면 리렌더링 함 

 

▽  +버튼을 누르면 숫자가 증가하고, - 버튼을 누르면 숫자가 감소 

      

      

      

    
    

      <javascript />
    
import { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);
  const increase = ()=>{
    setCount(count+1);
  }
  const decrease = ()=>{
    setCount(count-1);
  }
  return (<div>
    <h2>{count}</h2>
    <button onClick={increase}>+</button>
    <button onClick={decrease}>-</button>
  </div>)
}

export default Counter;

---

5. 프로퍼티(Props)

# 프로퍼티(Props) 

: 상위 컴포넌트가 하위 컴포넌트에게 값 전달시 사용 ( 단방향 데이터 흐름)

- 수정 불가 ( 하위 컴포넌트 기준에서 읽기 전용 데이터) 

- 하위 컴포넌트에서 프로퍼티의 값을 이용해 리액트 엘리먼트를 작성하여 리턴함 

- props는 (함수 매개변수처럼) 컴포넌트에 전달

 

- 컴포넌트의 매개변수로 props를 전달하고 자식 컴포넌트에서 그 값을 활용

      

      

      

    
    

      <javascript />
    
<Counter initialValue={2}/>

      

      

      

    
    

      <javascript />
    
const Counter = (props) => {
  const [count, setCount] = useState(props.initialValue);

- 기본값 설정 가능

      

      

      

    
    

      <javascript />
    
Counter.defaultProps={
  initialValue:1
}

 

* 컴포넌트가 리렌더링되는 경우

• 컴포넌트 본인이 가진 state가 변경될 때마다 리렌더링
• 컴포넌트 본인이 가진 props가 변경될 때마다 리렌더링
• 부모 컴포넌트의 state가 변경될 때마다 리렌더링 

 

- 컨테이너로 감싸기

      

      

      

    
    

      <javascript />
    
const Container = ({children}) =>{
  return (<div style ={{margin:0, padding:20, border:"1px soild gray"}}>
    {children}
  </div>
  );
};

export default Container;

      

      

      

    
    

      <javascript />
    
function App() {
  return (
    <Container>
    <div className="App">
      <MyHeader/>
      <Counter initialValue={2}/>
    </div>
    </Container>
  );
}