리액트 팬레터 홈페이지 만들기: 2단계. contextAPI로 리팩토링

0. 1단계 props-drilling으로 생성한 홈페이지

리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료.

1. [3단계] 중 [2단계] 구현 & TIL

• context 브랜치 : props-drilling의 작업 코드로 react context API를 사용 (전역상태를 이용한 코드로 리팩터링)

(1) 확실히 props로 하는 것보다 코드가 간결해졌고, 이해하기 쉬워졌음

(2) 데이터를 가져다 쓰는것도 매우 편리하다.

(3)Router.js에서부터 사용하려고 했는데 그 윗단계인 App.jsx부터 적용할 수 있음을 알게되었음.

 

---

 

 

(1) DataContext.js

import { createContext } from 'react';

export const DataContext = createContext(null);

▶createContext를 생성후 export 

 

(2) App.jsx

import { DataContext } from './context/DataContext';

 

function App() {

    const [comments, setComments] = useState(DummyData);

    const [clickedMember, setclickedMember] = useState('하니');

    return (

        <DataContext.Provider value={{ comments, setComments, clickedMember, setclickedMember }}>

            <GlobalStyle />

            <Router></Router>

        </DataContext.Provider>

    );

}

▶ Provider를 사용해 자식 컴포넌트로 데이터를 보내기 가능

▶ import 해서 사용하기

 

(3) Router.js

const Router = () => {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home />}></Route>

                <Route path="detail/:id" element={<Details />}></Route>

                <Route path="update/:id" element={<DetailsUpdate />}></Route>

            </Routes>

        </BrowserRouter>

    );

};

▶ props로 했을때는 <Home/>, <Details/>, <DetailsUpdate/>에 모두 props로 전달했어야했음

▶ Context를 활용하면 중간 자식 컴포넌트에는 전달할 필요가 없음

 

(4) Home.jsx

 

function Home() {

    const data = useContext(DataContext);

    return (

        <>

            <header>

                <StLogo src={logo}></StLogo>

                <Stimg src={newjeanimg}></Stimg>

            </header>

            <main>

                <WriteComments />

                <CommentsLayout />

            </main>

            <footer></footer>

        </>

    );

}

▶ Context를 활용하면 중간 자식 컴포넌트에는 전달할 필요가 없음

 

(4-1) Home.jsx -> WriteCommnets

function WriteComments() {

    const data = useContext(DataContext);

    const [writer, setWriter] = useState('');

    const [content, setContent] = useState('');

    const [selectMember, setSelectMember] = useState('하니');

    return (

      <StDivWrite>

        <form>

            :

            :

▶ data 변수에 useContext(DataContext)를 가져와서 활용하면 됨

▶ <CommentsLayout/> 컴포넌트도 동일 방식으로 진행.

▶ 코드만 리팩토링하여 결과물은 동일.

끝.