티포의개발일지

컴포넌트에서 특정 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 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;

먼저 useState로 상태 객체를 만들고, input onChange부분에 미리 선언한 함수를 넣어서 

값이 입력될 때마다 State가 바뀌도록 한다.

set을 사용할 때 여러가지의 변수가 바뀌어야 할 경우에는

setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });

이런 식으로 기존 객체를 복사하고, key값에 따라 value값이 바뀌도록 한다.

참조

https://react.vlpt.us/basic/08-manage-input.html

전체코드

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

1. 전에 만들어 두었던 폴더 중 src 폴더 밑에 Hello.js 파일을 만든다.

Hello.js

import React from 'react';

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

export default Hello;

2. 그 다음 App.js 에서 Hello 컴포넌트를 불러올 수 있다.

App.js

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

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

export default App;

정말 기본적인 컴포넌트 사용방법이다.

1. 등장 배경

    - 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 클래스형 컴포넌트가 가지는 단점인

       코드가 길고 복잡하며, Logic의 재사용이 어렵다는 점 때문에 사용하기 힘들다는 의견이 많았다.

    - 그 때 Hooks의 등장으로 인해 함수형 컴포넌트들이 클래스형 컴포넌트들의 작업을 할 수 있게 되었다.

2. 예제

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "100px" }}>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

보통의 자주 쓰는 hook은 useState와 useEffect 인데, 

컴포넌트 내에 객체나 변수가 필요할 때 useState로 선언을 해주고, JQuery에서 Object를 썼던 방식과 같이 컴포넌트에서도 객체를 다룰 수 있다. ( json 형태도 가능 )

사용 방법도 정말 간단하며, JQuery에서 썼던 방식보다 객체를 다루기 쉬우며, 클래스형 컴포넌트처럼 코드가 많이 복잡하지도 않다. 

useEffect같은 경우는 useState로 선언한 변수들의 변함에 따른 Logic을 구성할 수 있다.

useEffect(()=> { //페이지가 바뀔 때마다 설정값 바꿔줌
      let emptyArray = [];
      let start = (currentPage-1) * postNumber;
      let end = ((currentPage-1) * postNumber) + postNumber;
      
      for(var i = start ; i < end; i ++) {
            if(!listArrayall.array[i]) { //더이상 값이 없을 때의 조건문
              emptyArray.push("")
            }
            else {
              emptyArray.push(listArrayall.array[i]);
            }
          }
          
      setListArraypost(emptyArray);
      
      let emptyJson = {};
      let j = 0;
      for (var i = start; i < end; i ++) {
        if(listArrayall.array[i] !== undefined) {
          emptyJson[j] = {indexid : j, rowsid : listArrayall.array[i]._id, checked : false}
        }
        j++;
      }
      j = 0;
      setCheckedArray(emptyJson);
  } ,[currentPage]);

해당 코드는 내가 Next.js로 개발하면서 썼던 구문인데,  간단하게 말하자면 두번째 인자값으로 [] 배열 안에 변경이 감지될 변수( currentPage )를 넣어주고, 첫번째 인자로 변경이 감지되었을 때 로직( arrow 함수 )이 실행되도록 구현하였다.

참조

https://codingbroker.tistory.com/23

1. aws 서버에 인스턴스를 만들고 터미널창을 켜서 React를 설치한다. ( 폴더 이름은 원하는대로 가능하다. )

npx create-react-app gsreact

2. 그럼 이런식으로 폴더들이 생성되는것을 확인할 수 있다.

3. 여기서 바로 npm start를 해보면 3000번 포트에 리액트 화면이 나오는것을 확인할 수 있다.

정말 쉽다!