[2024 React.js 스터디] 한승훈 #4주차

1. React는 어떻게 만들어졌을까
React는 사용자와의 인터랙션이 있는 페이지를 위해 만들어졌습니다.

요소의 관리가 더욱 편해집니다.

2. 개발 환경과 시작
개발 환경을 갖춘 후,
npx create-react-app new-react
cd new-react
yarn start
를 통해 바로 localhost로 실행이 가능합니다.

3. 컴포넌트 만들기
컴포넌트 상단에는
import React from ‘react’ //리액트를 사용할거라는 의미
하단에는
export default FileName // FileName이라는 이름으로 타 파일에서 접근할것임
을 명시합니다.
이를 FileName.js에 작성하고,
App.js에서 FileName.js를 import해서 사용하는 것입니다.

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

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

export default App;
이 App.js의 형태가 되겠는데요, 이전에 정의한 Hello.js파일이 하나의 태그처럼 사용되는 것을 볼 수 있습니다.
이 ‘사용자 정의 태그’가 바로 React의 기본이자 핵심입니다.

4. JSX 문법
-태그는 닫혀야 합니다
<div>
code
</div>
굳이 중간의 공간이 필요가 없다면, self-closing 문법으로 작성해 줍니다.
<div />
-태그 내에 텍스트가 아니라 변수를 불러오고 샆을 때는, {name}으로 가져옵니다.
- 주석 또한 중괄호로 감싼 뒤, 작성합니다.

5. props
component를 직접 변경하지 않는 리액트는 props를 이용합니다.

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

function App() {
  return (
    <Hello name="react" />  // Hello 안에 name 이라는 값을 전달
  );
}

export default App;

App.js에서 Hello.js에 접근하여 Hello 태그 내에 name이라는 정보를 전달하려면

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

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

export default Hello;

Hello.js는 다음과 같으면 된다. 함수 Hello에 매개변수(props)를 주고, 태그 내에 {props.name}를 사용하여 변수에 대응하는 결과가 오게 한다.

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

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

export default Hello;

위와 같이, props를 여러 가지(color, name)으로 분해하여 따로 사용이 가능하다.

-props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 됩니다.

Wrapper.js

import React from 'react';

function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>

    </div>
  )
}

export default Wrapper;

App.js

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

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

export default App;

 

Wrapper 내부의 <Hello>태그의 내용들이 보이지 않는다. 내부의 내용이 보여지게 하기 위해서는 Wrapper 에서 props.children 을 렌더링해주어야 합니다.

Wrapper.js

// 아래와 같이 수정
import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

 

6. 조건부 렌더링

props의 값에 따라 다른 값을 표출해봅시다.

// 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;

 

isSpecial이 True와 False일 경우, 각각 다른 결과를 반환하게 해봅시다.

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

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

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

export default Hello;

isSpecial = {true}라면 *이 표시될 것이고, 아니면 null로, 표시되지 않을 것입니다.

default는 true!

 

 

7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기.

import React, { useState } from 'react';

이 코드는 리액트 패키지에서 useState 라는 함수를 불러와줍니다.

// 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;

 

onClick으로 등록된 onIncrease와 onDecrease의 결과를 베열 useState의 1번 인덱스인 Setter 함수로 업데이트해줍니다.

이렇게 새로운 값을 넣는 방식 대신, 기존 값 업데이트도 가능합니다.

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

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

 

이렇게 코드를 설정해주면 기존의 값을 업데이트 합니다.

 

 

8. input 상태 관리하기

useState의 onChange 이벤트를 사용하면, input 값의 관리가 가능합니다.

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

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

  const onChange = (e) => { /* onChange의 target.value로 현재 값 추적 */
    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;

 

9. 여러 개의 input

여러개의 useState와 onChange로 구현이 가능하겠지만, 그보다 좋은 방법은 input에 이름을 설정해주는 것입니다.

그리고, 객체의 업데이트 시에는 객체를 직접 수정하지 않고 변화가 적용된 새로운 객체를 사용합니다.

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; // 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;

 

감사합니다.

출처: https://cs-kookmin-club.tistory.com/373 [KMU_SW_CLUB:티스토리]