[React]props VS custom Hook feat.ContextAPI

props와 커스텀 훅의 주요 차이점은

 

props가 부모 컴포넌트에서 자식 컴포넌트로 명시적으로 전달되는 반면,

커스텀 훅은 컴포넌트 내에서 또는 여러 컴포넌트 간에 상태 논리를 캡슐화하고 재사용하는 데 사용된다.

 

커스텀 훅은 또한

useState와 useEffect와 같은 React 내장 훅을 사용하여

상태와 부작용을 관리할 수 있으며,

이는 컴포넌트의 논리를 단순화하고 재사용성을 높일 수 있다.

 

// Parent.js
import React from 'react';
import Child from './Child';

function Parent() {
  const data = { name: 'John', age: 30 };

  return (
    <div>
      <Child data={data} />
    </div>
  );
}

export default Parent;

// Child.js
import React from 'react';

function Child(props) {
  const { data } = props; //props 전달 받을 때 이렇게 받는다.

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

export default Child;

props 예시

---

// useSearch.js
import { useState } from 'react';

function useSearch(initialData) {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState(initialData);

  const handleSearch = () => {
    // perform search logic using searchTerm
    // update searchResults
  };

  return {
    searchTerm,
    setSearchTerm,
    searchResults,
    handleSearch,
  }; //리턴으로 반환할 값들을 명시
}

export default useSearch;

// Search.js
import React from 'react';
import useSearch from './useSearch';

function Search() {
  const initialData = ['apple', 'banana', 'orange'];
  const { searchTerm, setSearchTerm, searchResults, handleSearch } = useSearch(initialData);

  const handleSubmit = (event) => {
    event.preventDefault();
    handleSearch();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
        <button type="submit">Search</button>
      </form>
      <ul>
        {searchResults.map((result) => (
          <li key={result}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

custom hook 예시

 

---

context API란?

React에서 컴포넌트 간에 데이터를 전달하고 관리하기 위한 기능을 제공하는 API

 

createContext 함수를 이용하여 Context 객체를 생성하고, Provider 컴포넌트로 해당 컨텍스트를 제공!!

 

프로젝트에 적용한 createContext

로그인 정보나 사용자 설정과 같이 프로젝트 전체에서 공유되는 데이터는

Context API를 이용하여 관리하는 것이 효과적이다.

 

 

다른 예시

import React, { createContext, useState } from 'react';
import Header from './Header';
import Main from './Main';

export const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: '', email: '' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Header />
      <Main />
    </UserContext.Provider>
  );
}

export default App;

import React, { useContext } from 'react';
import { UserContext } from './App';

function Header() {
  const { user } = useContext(UserContext);

  return (
    <header>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </header>
  );
}

export default Header;

중앙 집중적인 데이터 관리가 필요한 프로젝트에서 유용하게 사용됨!

 

---

참고하면 좋은 영상!!

 

https://youtu.be/sqz45pnvJHg