티포의개발일지

 전체 코드

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

첫번째 방법으로는 Spread 연산자를 사용해서 

setUsers([...users, user]);

이런식으로 추가를 해주는 방법이 있고, 

두번째 방법으로는

setUsers(users.concat(user));

이런식으로 concat 함수를 사용하는 방법이 있다.

참조

https://react.vlpt.us/basic/13-array-insert.html

컴포넌트에서 특정 DOM을 선택하거나 포커싱을 주어야 할 때 ref를 사용한다.

먼저 포커싱을 주는 예제를 살펴보면,

전체 코드

import React, { useState, useRef } from 'react';

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

  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: ''
    });
    nameInput.current.focus();
  };

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

export default InputSample;

먼저 useRef를 react에서 가져오고,

import React, { useState, useRef } from 'react';

특정 변수를 useRef()로 선언한다.

const nameInput = useRef();

그 다음 input 인자에 ref를 변수명으로 넣어주고,

<input
  name="name"
  placeholder="이름"
  onChange={onChange}
  value={name}
  ref={nameInput}
/>

원하는 위치에 current.focus() 를 실행해준다.

const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

이러면 onReset 함수가 실행되면 포커싱이 nameInput을 ref속성으로 가진 곳에 포커싱이 된다.

useRef로 선언된 변수에 변경사항이 생길 경우에 useState와는 달리 리렌더링이 발생하지 않는다.

하지만 useRef로 선언된 변수는 같은 메모리 주소를 가지기 때문에 === 연산이 항상 true값을 반환하게 된다.

참조

https://ko.reactjs.org/docs/hooks-reference.html#useref

전체코드

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;

1. 먼저 react 패키지에서 useState를 불러온다.

import React, { useState } from 'react';

2. 그 다음 변수 이름과 set함수 이름을 선언하고, useState()의 인자값으로 변수의 초기값을 설정한다.

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

3. onClick함수로 실행될 함수들을 선언한다.

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

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

4. return 안 버튼에 onClick쪽에 위에 선언한 함수를 넣어준다.

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

참조

https://react.vlpt.us/basic/07-useState.html

개발을 하다보면 조건에 따라서 컴포넌트가 어떤것이 보여질지 정해야 하는 순간이 있는데,

이럴 땐 보통 조건부 렌더링을 쓴다.

보통은 전 글에서와 같이  <Hello />  이런식으로 렌더링 하지만, 조건부렌더링을 쓸 때는

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일 경우에 <b>*</b>를, false일 경우엔 null을 반환한다는 뜻이다. 

또 다른 방법으로는

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이 false일 땐 false, true일 땐 <b>*</b> 값을 나타내게 된다.

참조 

https://react.vlpt.us/basic/06-conditional-rendering.html

리액트에서는 컴포넌트를 선언할 때, 속성을 전달할 수 있다.

JQuery에서는 페이지 내에서 객체를 선언하고, 다른 페이지로 그 객체를 전달하려면 백엔드를 거쳐야 했지만, 

리액트같은 경우에 보다 편리한 방법으로 객체를 전달할 수 있다.

App.js

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

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

export default App;

Hello 파일의 컴포넌트를 가져와서 선언하고, return될 때 사용되게끔 했다. 또한 name = "react" 라는 값을 보내주었다.

Hello.js

import React from 'react';

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

export default Hello;

그럼 이처럼 함수의 인자값으로 props 안에 name이 들어가게되고, 아까 보내주었던 name을 컴포넌트에서

사용할 수 있다.

만약 컴포넌트에 props를 지정하지 않았을 경우에 default 값도 설정해줄 수 있는데,

import React from 'react';

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

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

export default Hello;

이런식으로 사용이 가능하다.

컴포넌트끼리 원하는 객체나 변수를 주고 받는 기능은 매우 유용하다고 느꼈다.

-참조

https://react.vlpt.us/basic/05-props.html

JSX란 리액트에서 생김새를 정의할 때 사용하는 문법이다. Javascript이나 HTML같이 생겼다.

JSX에서 꼭 지켜줘야 하는 문법이 있는데, 바로 태그를 꼭 닫아주어야 한다는 것이다.

컴포넌트 안에 변수를 선언하거나 style을 json형태로 선언하고, { } 중괄호 안에 담아서 속성을 부여할 수도 있다.

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

function App() {
  const name = 'react';
  const style = { 
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

참조

https://react.vlpt.us/basic/04-jsx.html