이제껏 component를 제작할 때, 함수형 component만을 사용했었다. React에서는 함수형이 아닌 다른 방법으로 component를 빌드할 수 있다. React hook에서도 잠깐 다뤘지만, Class를 이용해서 component를 제작할 수 있다. 물론, hook이 도입된 이후로 React project에서는 거의 이 방법을 사용하지 않는다. 따라서, 이부분은 생략을 해도 무관하지만 아직 여전히 많은 third party library나 이미 제작된 project에서 볼 가능성이 있다. Functional Components그 전에 이제까지 배웠던 함수형 component에 대해서 정리하고 넘어가자.function Product(props) { return A Product! ;}// o..
What is useReducer()? 앞서서 useState()와 useEffect()에 대해서 다뤄봤었다. 이번에는 다음 React hook인 useReducer()에 대해서 이야기해보자. 간단히 말해, state의 관리를 도와주는 것으로 useState()와 비슷하다. 오히려 더 많은 기능들을 가지고 있다. 특히, 더 복잡한 state에 유용하다. 예를 들어, 여러 state들이 함께 속해 있는 경우에 같이 바뀐다던가 서로가 관련되어 있다면 관리하는 측면에서 사용이나 관리가 어려워지거나 오류가 발생하기 쉬워진다. 효율이 나빠지거나 버그가 생길 수 있는 코드가 되기 쉽상이다. 물론 그런 상황에 다다르는 것을 원하는 개발자는 아무도 없을 것이다. React project를 진행하면서 더 강력한 stat..
Ref란? ref는 참조를 뜻하는 reference의 줄임말로 React에서 자주 쓰이는 hook이다. 가장 기본적인 기능은 다른 DOM 요소에 접근해서 참조하여 작업할 수 있게 해주는 것이다. ref에 대해서 설명하기 전에 기존의 코드에 대해서 먼저 언급을 하고 넘어가겠다. 더보기 // 📂 addUser.js import React, { useState } from "react"; import Card from "../UI/Card"; import Button from "../UI/Button"; import Wrapper from "../Halpers/Wrapper"; import ErrorModal from "../UI/ErrorModal"; import styles from "./AddUser.m..
component는 useState를 사용하여 state를 가질 수 있다고 앞서 설명했다. 그러한 component들의 상태를 의미하는 용어들이 존재하는데 그것을 알아보자 state less, presentational, dumb component 위의 여러 명칭들은 아무런 state를 가지지 않고 단지 데이터를 출력하기 존재하는 component을 의미한다. 이와 반대로 state를 가진 component를 아래의 명칭으로 읽컫는다. smart, stateful components 아무래도 React에서 component를 다루다보면 응용프로그램을 작고 재사용 가능한 조각으로 나누기 때문에 대부분의 조각들, component들은 실제로 무언가를 출력하는 데에 초점을 맞추고 있다. 때문에 project에..
Form HTML에서도 존재했던 폼이다. 마찬가지로 JSX코드를 통해 표준 JS로 변환된다. 이제는 버튼이 눌렸을 때, 이 폼(form)이 제출되도록 만들 것이다. 전반적인 코드 구성은 아래와 같다. const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; const amountChangeHandler = (event) => { set..
