[2024 여름방학 React.js 스터디] 강보경 #3주차

리액트

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

컴포넌트 기반으로 되어 있어 재사용성이 높고, 상태 관리를 통해 동적인 UI를 쉽게 만들 수 있다.

업데이트에 대한 고민 없이 처음부터 모든 걸 새로 만들어 보여주려 만들었고 이 때의 문제인 느린 속도를 해결하기 위해 Virtual DOM을 이용하여 작동 성능이 빨라졌다.

 

 

컴포넌트

독립적인 UI 단위로 재사용이 가능하며 각각의 컴포넌트는 고유한 상태와 라이프사이클을 가진다.

 

 

JSX

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

return <div>안녕하세요</div>;

 

태그를 꼭 닫아야 함 (ex: <div></div>)

태그와 태그 사이에 내용이 들어가지 않을 때는 Self Closing 태그 사용

두 개 이상의 태그는 무조건 하나의 태그로 감싸기 -> 단순히 감싸기 위한 불필요한 div 사용 대신 Fragment 사용 가능

Fragment: 이름 없는 태그, 별도의 엘리먼트로 나타나지 않음

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

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

 

JSX 내부에 자바스크립트 변수는 {}로 감싸서 보여줌

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

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

 

주석: {/* 주석내용 */} or // 주석내용

 

 

props

컴포넌트 간 데이터 전송 (객체 형태로 전달)

컴포넌트에게 전달되는 props는 파라미터로 조회 가능 (name 값 조회: props.name)

App.js

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

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

export default App;

 

Hello.js

import React from 'react';

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

export default Hello;

 

defalutProps: 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정

props.children: 컴포넌트 태그 사이에 넣은 값 조회 -> 내부 내용 보여지게 하려면 props.children 렌더링

 

 

조건부 렌더링

특정 조건에 따라 다른 결과물 렌더링

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


function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>
      <Hello color="pink" />
    </Wrapper>
  )
}

export default App;


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

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

isSpecial && <b>*</b> : isSpecial이 false일땐 false이고 true일땐 <b>*</b>

props 값 설정 생략: true

 

 

useState

컴포넌트에서 바뀌어야 하는 내용이 사용자 인터랙션에 따라 바뀌어야할 때

리액트 Hooks 중 하나, 함수형 컴포넌트에서 상태 관리

// Counter.js

import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;


// App에서 Counter 렌더링

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

function App() {
  return (
    <Counter />
  );
}

export default App;


// 이벤트 설정

import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

useState 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출 -> 배열 반환 -> 첫번째 원소는 현재상태, 두번째 원소는 Setter 함수

함수형 업데이트: 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줄 수도, 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있음

 

 

input 상태 관리

// InputSample.js
import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

// App.js (App에서 렌더링)
import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;

 

여러 개의 input 상태 관리:  input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조

// InputSample.js
import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

 

객체 수정: 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용

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