React.js

Today I Learned ... react.js

🙋‍♂️ *Reference Lecture

🙋‍ My Dev Blog

---

React Hooks 강의

Hooks

• vsCode 대신 CodeSandBox에서 먼저 작성하기.

1. useState

useState 사용법

import React, { useState } from 'react';

export default function App() {
  const [item, setItem] = useState(1);

  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);

  return (
    <div className="App">
      <h1>Hello CodeSandbox {item}</h1>
      <button onClick={incrementItem}>+1</button>
      <button onClick={decrementItem}>-1</button>
    </div>
  );
}

useInput 생성

1. value

import React, { useState } from "react";
import "./styles.css";

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  return { value } ;
};

const App = () => {
  const name = useInput("Mr.");
  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Name" value={name.value} />
    </div>
  );
}

export default App;

-> useInput Hook 생성.

name = useInput()을 해주면
name에는 { value } 가 저장됨. 즉, name.value에 value(state)값이 저장됨.

⚡️ TIP!

<input placeholder="Name" {...name} />

name 안에 있는 것을 풀어줘서 (spread)
value 어트리뷰트에 value(state)값이 들어간다.

name은 { value : Mr. }라는 객체임.
객체를 풀어주면 value: Mr.이 되므로 value 어트리뷰트의 값에 Mr. 이 들어가게 되는 것.

2. onClick

import React, { useState } from "react";
import "./styles.css";

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
    const {
      target: { value }
    } = e;
    setValue(value);
  };
  return { value, onChange };
};

export default function App() {
  const name = useInput("Mr.");
  const email = useInput("@");

  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
      <input placeholder="Email" {...email} />
    </div>
  );
}

spread(...) 이용
return { value, onChange } 를 해주므로,
name = { value: Mr. , onChange: onChange } 이고
spread 하면 value 어트리뷰트에 Mr.가 들어가고,
onChange 어트리뷰트에는 onChange함수가 들어감.

---

validator 추가

• 예를 들면, input에 입력할 수 있는 최대 길이를
  10자로 제한하려 한다.
  -> useInput의 인자로 initialValue와 함께 validator을 넣어준다.

import React, { useState } from "react";
import "./styles.css";

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
    const {
      target: { value }
    } = e;
    let willUpdate = true;
    if (typeof validator === 'function') {
      willUpdate = validator(value);
    }
    if (willUpdate) {
      setValue(value);
    }
  };
  return { value, onChange };
};

export default function App() {
  const maxlength = (value) => value.length <= 10;
  const name = useInput("Mr.", maxlength);

  return (
    <div>
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
}

validator 값은 함수가 될수도 있고, 유효성 검사가 불필요한 경우에는 인자로 전달해주지 않으면 undefined가 될수도 있다.

1. validator의 값이 undefinded라면 (기본)
   -> willUpdate는 true이고,
   if(willUpdate) { setValue(value) } 가 동작하게 한다.

2. validator의 값이 함수라면
   -> typeof validator === 'function'이면
   -> willUpdate = validator(value);

-> validator 함수에 인자로 value를 넣어주고
리턴값이 true면 setValue가 되고,
false면 setValue가 되지 않음.

---

useTabs

useTabs.js

import { useState } from "react";
const content = [
  {
    tab: "Section 1",
    content: "I'm the content of the Section 1"
  },
  {
    tab: "Section 2",
    content: "I'm the content of the Section 2"
  },
]
  
const useTabs = (initialTab, allTabs) => {
  if(!allTabs || !Array.isArray(allTabs)) {
    return;
  }
  const [currentIndex, setCurrentIndex] = useState(initialTab);

  return {
    currentItem : allTabs[currentIndex],
    changeItem : setCurrentIndex
  }
}

const App = () => {
  const { currentItem, changeItem } = useTabs(0, content);
  return (
  <div>
    {content.map((section, index) => 
      <button onClick={() =>changeItem(index)}
      >{section.tab}</button>)}
      <div>
        {currentItem.content}
      </div>
      
  </div>
  );
}

• 마찬가지로 useState를 이용함.
• initialTab은 초기 값, 즉 인덱스이다.
• allTabs는 데이터 원본격인 배열 형태로, 안에 {tab, content} 인 객체가 있다.