[2025 겨울방학 React.js 스터디] 백채린 #1주차

1. 리액트 컴포넌트

 

- 리액트 컴포넌트를 만들 땐

 

import React from 'react;

 

를 통해 리액트를 불러와줘야 함

 

- 함수, 클래스 형태로 작성할 수 있음 (아래는 함수 형태)

 

funcion Hello() {
	return <div>안녕하세요</div>
}

 

- 컴포넌트를 내보내줘야 다른 컴포넌트에서 불러와서 사용할 수 있음

 

export default Hello;

 

- 컴포넌트는 일종의 UI 조각이기 때문에 재사용 가능

 

// App.js

import React from 'react';
import Hello from './Hello';

function App() {
	return (
    	<div>
            <Hello />
            <Hello />
        </div>
    );
}

export default App;

 

 

 

2. JSX

 

- JSX는 리액트에서 생김새를 정의할 때 사용하는 문법

 

* Babel https://bit.ly/2wMpkk2

Babel · Babel

: 자바스크립의 문법을 확장해주는 도구,

  리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 JavaScript로 변환해줌

 

- JSX 규칙

 

1. 태그는 꼭 닫혀있어야 함 ex) <div></div>

* Self Closing 태그:  바로 닫히는 태그, 태그와 태그 사이에 내용이 들어가지 않을 때 사용

ex) <input />, <br />

 

2. 두개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 함

* Fargment: 태그를 이름없이 작성하면 만들어짐, div 같은 걸로 감싸기 애매할 때 사용

 

- 주석

JSX 내부 주석은 {/* 이런 형태로  */} 작성

열리는 태그 내부에서는 // 이런 형태로도 작성

 

 

 

3. props (properties)

 

- 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용

 

// App.js
import React from 'react';
import Hello from './Hello';

const App = {
	return (
    	<Hello name = "react" />
    );
}

export default App;

 

// Hello.js
import React from 'react';

const Hello(props) {
	return <div> 안녕하세요 {props.name} </div>
}

export default Hello;

 

- 컴포넌트에게 props를 지정하지 않았을 때 defaultProps 라는 값 설정

 

Hello.defaulrProps =. 
	name: '이름없음' 
}

 

 

 

4. useState

 

- 첫 번째 함수는 현재 상태, 두 번째 원소는 Setter 함수

 

const [number, setNumber] = useState(0);

 

→ 이 함수를 호출하면 배열이 반환됨

 

// counter.js

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

 

5. input 상태 관리하기

 

- spread 문법 (... 문법)

: 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해줌

 

setInputs({
  ...inputs,
  [name]: value
});

 

- 리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하지 않고 새로운 객체를 만들어서, 새 객체에 변화를 주어야 함