JSCODE - React 3회차

1. props

컴포넌트의 props는 properties의 줄임말로 어떠한 값을 컴포넌트에 전달해줘야 할 때 props를 사용한다.

1.1 기본 사용법

Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때 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;

1.2 여러 개의 props, 비구조화 할당

Ex) Hello 컴포넌트에 또 다른 props, color 값을 전달
App.js

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

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

export default App;

Hello.js

import React from 'react';

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

export default Hello;

props 내부 값을 조회 할 때 props.을 입력하고 있다. props. 대신에 비구조화 할당(=구조 분해) 문법을 사용하면 코드가 더 간결해진다.

Hello.js

import React from 'react';

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

export default Hello;

컴포넌트의 파라미터에서 {}안에 받는 props를 미리 표기한다.

1.3 defaultProps

Hello.js

function Hello({name, age}) {
  return <div>{name}</div>
}

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

2. State

• state는 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 리액트에서 쓰는 일반 자바스크립트 객체이다.
• 함수가 종료될 때 사라지지 않고 리액트에 의해 보존된다.
• 사용자 작업 또는 네트워크 변경에 따라 state를 수정할 수 있다.
• state 객체는 여러 속성을 저장할 수 있다.
• setState()는 새 state와 이전 state 사이의 얕은 병합을 수행한다.

3. event handling

3.1 사용법

html

<button onclick="activateButton()">클릭하세요</button>

React

<button onClick={activateLasers}>
  Activate Lasers
</button>

3.2 주의점

DOM 요소에만 이벤트 성정이 가능하다. div, button, input 등의 DOM 요소에는 이벤트 설정이 가능하지만, 리액트의 컴포넌트에는 불가능함
컴포넌트에 onClick을 달아도 이벤트가 실행되지 않고 props를 전달해주는 것에 불과하다.

4. useState

react 16.8 버전부터 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태(state) 관리가 가능해졌다.
Hooks 중에 useState()를 이용하면 함수형 컴포넌트에서 상태 관리가 가능하다.

4.1 사용법

Counter.js

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const countupHanlder = (e) => {
    console.log("countuptHanlder");
    setCount(count + 4);
    console.log(count)
    
  };

  const countdounHanlder = (e) => {
    console.log("countdountHanlder");
    setCount(count - 1);
    console.log(count)
  };

  return (
    <>
      <div onClick={countdounHanlder}>
        <button onClick={countupHanlder}>Click</button>
      </div>
      <div>{count}</div>
    </>
  );
}

useState

• 반환값 : 상태를 나타내는 배열
• 배열의 첫 번째 요소 : 현재 상태 값
• 배열의 두 번째 요소 : 상태 값을 갱신해주는 Setter 함수

5. useEffect

useEffect도 Hooks 중 하나로, 컴포넌트가 렌더링 될 때 특정 작없을 실행할 수 있도록 한다.
useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.

• 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 그리고 업데이트 될 때 처리할 수 있다.

5.1 마운트 / 언마운트

UserList.js

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

첫번째 파라미터 : 함수
두번째 파라미터 의존값이 들어있는 배열(deps)

• deps 배열을 비우게 되면 -> 컴포넌트가 마운트될 때만 useEffect에 등록한 함수 호출
• useEffect에서 함수를 반환할 수 있는데 이를 cleanup 함수라고 부른다.
• deps가 비어있는 경우에는 컴포넌트가 언마운트 될 때 cleanup 함수가 호출된다.

5.2 deps에 특정 값 넣기

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

deps에 특정 값을 넣으면 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다

5.3 deps 파라미터 생략

deps 파라미터를 생략하면 컴포넌트가 리렌더링 될 때마다 호출이 된다.