리엑트3 [React] useContext 사용하기 React에서 useContext는 React 컴포넌트 트리 전반에 걸쳐 데이터를 공유하는 방법을 제공합니다. 이 훅을 사용하면 함수형 컴포넌트에서 Context의 값을 쉽게 읽을 수 있습니다. 또한, 하위 컴포넌트가 연속적으로 있는 경우에도 드릴링을 방지할 수 있습니다. useContext와 Context API를 활용한 전역 상태 관리 복잡한 컴포넌트 구조에서 props를 여러 계층에 걸쳐 전달하는 것은 비효율적일 수 있습니다. 이를 해결하기 위해 React의 Context API를 사용할 수 있습니다. useContext 훅을 사용하면 컴포넌트 트리 어디에서나 직접적으로 Context의 값을 읽고 업데이트할 수 있습니다. UserContext 생성 및 제공 export const UserContex.. 2023. 12. 10. [Remix] 리엑트 리믹스 프레임워크 알아보기 리엑트(React) 리믹스(Remix)는 리엑트 라우터(React-Router)를 만든 개발자가 만들었습니다. Remix는 원래 라이선스 비용을 지불하는 유료 프레임워크였는데, 최근에 무료로 변경되었습니다. Remix 프레임워크 특징 Remix는 프로젝트를 시작할 때 어떤 종류의 서버에서 배포할 건지 선택하게 됩니다. 그 이유는 서버 측에서 렌더링(HTML) 하여 페이지를 보여주기 때문입니다. 즉, 프론트 서버에서 "JS" 코드를 읽고 "HTML"으로 렌더링 해서 보여줍니다. 이 결과로 유저는 하얀 화면(인터넷 속도가 느린 경우 포함), 로딩 중 화면을 볼일이 없습니다. (서버사이드 렌더링) 다만, 데이터를 불러오고 보여주는 과정이 조금 다릅니다. "loader"라는 함수를 통하여 "API"를.. 2022. 12. 5. [Gatsby] 리엑트 개츠비 프레임워크 알아보기 리엑트(React) 개츠비(Gatsby)는 정적 웹 페이지를 만들기 적합한 CMS입니다. Gatsby는 빌드 시 "HTML" 확장자를 가진 파일로 별도의 "JS"를 불러오는 렌더링이 아닌 빌드 할 때에 모두 작성됩니다. 따라서, "정적 웹 페이지"를 만들기에 적합합니다. 여러 강력한 플러그인을 별도로 제공하고 있으며, Gatsby 공식 홈페이지에서 "클라우드 서비스"를 제공합니다. 또한, GraphQL을 이용하여 JS 객체로 저장하고 데이터를 가져올 때에 사용되는데 특정 JSON 파일을 읽어 데이터 풀에 저장한 후 사용된다. 개인적인 의견 레거시 방법(HTML5, CSS3, JS)으로 정적 사이트를 충분히 만들 수 있지만 요즘은 프론트 기술들이 너무 좋기 때문에 여러 가지를 감안하면 레거시 방법을 절대 .. 2022. 12. 5. 이전 1 다음
