리액트 쿼리 ,리액트 폼 으로 왠만한 코드가 해결된다?

리액트 쿼리 ,리액트 폼 으로 왠만한 코드가 해결된다?

리액트 쿼리 ,리액트 폼 으로 왠만한 코드를 해결가능

 

React Query:

React Query는 서버에서 데이터를 가져오고 관리하기 위한 라이브러리입니다. 간단한 API 요청, 캐싱, 상태 관리를 제공하며, 서버 상태와 데이터를 효율적으로 관리할 수 있습니다.

아래는 React Query를 사용하여 간단한 데이터를 가져오고 화면에 출력하는 예제입니다.

 

import React from 'react';
import { useQuery } from 'react-query';

const fetchUserData = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const data = await response.json();
  return data;
};

function UserProfile() {
  const { data, error, isLoading } = useQuery('user', fetchUserData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {data.name}</p>
      <p>Email: {data.email}</p>
    </div>
  );
}

export default UserProfile;

 

 

 

React Form:

React Form은 React 애플리케이션에서 폼 처리를 단순화하는 도구입니다. 폼의 상태 관리, 유효성 검사, 제출 처리 등을 용이하게 할 수 있습니다.

아래는 React Form을 사용하여 간단한 입력 폼을 만드는 예제입니다.

Copy code
import React from 'react';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log('Form Data:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Email:</label>
        <input
          type="text"
          name="email"
          ref={register({ required: true, pattern: /^\S+@\S+$/i })}
        />
        {errors.email && <span>Email is required</span>}
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          ref={register({ required: true, minLength: 6 })}
        />
        {errors.password && <span>Password is required (min length 6)</span>}
      </div>
      <div>
        <button type="submit">Login</button>
      </div>
    </form>
  );
}

export default LoginForm;

React Form:

React Form은 React 애플리케이션에서 폼 처리를 단순화하는 도구입니다. 폼의 상태 관리, 유효성 검사, 제출 처리 등을 용이하게 할 수 있습니다.

아래는 React Form을 사용하여 간단한 입력 폼을 만드는 예제입니다.

jsx

 

React Memo PropsEqual

 

 

import React, { memo } from 'react';

// Custom propsEqual function to compare props
function propsEqual(prevProps, nextProps) {
  // Compare props.name and props.age for equality
  return prevProps.name === nextProps.name && prevProps.age === nextProps.age;
}

// Functional component
const Person = ({ name, age }) => {
  console.log(`Rendering ${name}`);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

// Wrap the component with React.memo and provide the propsEqual function
const MemoizedPerson = memo(Person, propsEqual);

function App() {
  const [person, setPerson] = React.useState({ name: 'John', age: 30 });

  const updatePerson = () => {
    // Update only the age property to trigger a re-render
    setPerson((prevPerson) => ({
      ...prevPerson,
      age: prevPerson.age + 1,
    }));
  };

  return (
    <div>
      <h1>Person Details</h1>
      {/* Render the MemoizedPerson component */}
      <MemoizedPerson name={person.name} age={person.age} />
      <button onClick={updatePerson}>Update Age</button>
    </div>
  );
}

export default App;

 

 

 

 

React  UseCallback 최적화 방식

 

부모와 자식  버튼 누르면

                                 = 부모 자식  실행되는것을 Usecallback으로  부모님 실행되게끔 만들수있다.