본문 바로가기

공부모음

 (10)
React className이 겹치지 않게 작성하는 팁 1. 컴포넌트의 이름을 고유하게 지정 2. 최상위 엘리먼트의 클래스이름을 컴포넌트 이름과 똑같게 3. 그 내부에서 셀렉터 사용
LoginProvider.jsx import React, { createContext, useState } from "react"; const LoginContext = createContext(); export const LoginProvider = ({ children }) => { const [loginStatus, setLoginStatus] = useState({ user_Id: "", user_Name: "", logon: false, admin: false, }); const value = { loginStatus, setLoginStatus, }; return ( {children} ); }; export default LoginContext;
MyPage.jsx import React from "react"; import { PageTemplate } from "../components"; import { MyPageContainer } from "../containers"; const MyPage = () => { return ( ); }; export default MyPage;
MyPageContainer.jsx import React, { useEffect, useContext, useState } from "react"; import { LoginContext } from "../store"; import { fetchData } from "../library"; import { UserTable } from "../components"; const MyPageContainer = () => { const [userData, setUserData] = useState({ user_Id: "", user_Password: "", user_Email: "", user_Name: "", }); const { loginStatus } = useContext(LoginContext); const { user_Id: u..
garage mypage 구현 파일구조의 시작부터 이해 내가 구현해낼 페이지에서 그려낼 내용을 내가 만들페이지에서 필요한게 뭔지 찾고, 거기에 컨테이너가 필요하면 관련 컨테이너파일을 만들어준다. 그리고 그것들은 전부 index.js에서 관리하기로했으니 경로설정을 해주고 페이지에서 import해서 불러온다. 로그인페이지는 정보를 게시판 여러군데에서 불러오기 때문에 컴포넌트안에서 관리하는게 아니라 따로 분리해서 관리해서 불러와줘야된다. 단독관리 (컨택스트에이피아이)= 리덕스 useEffect (() => { }, [] 구조이고 []의 값을 참조해서 변경사항 내용이 있을때마다 값을 계산해서 실행시켜준다. 그리고 빈 배열을 일때만 한번만 실행된다.(외부api에서 데이타값을 받아올때 많이 쓴다.) 로그인상태를 전체에서 관리 그거를 가져와야된다..
React 서버구동 yarn global add nodemon 로딩없이 서버가 돌아가게 해주는것
Buttion.jsx를 받아오는 App.jsx import React from "react"; import { Button } from "./components/"; function App() { return ( {/* primary 색상 버튼, 크기 별로 확인 */} kjs kcc abc {/* secondary 색상 버튼, 크기 별로 확인 */} asdf qwer zxcv {/* teritiaty 색상 버튼, 크기 별로 확인 */} Button BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON ); } export default App;
Button.jsx /** @jsx jsx */ import { jsx, css } from "@emotion/core"; import PropTypes from "prop-types"; // 버튼 컴포넌트 const Button = ({ children, onClick, color = "primary", size = "medium", variation, width, }) => { console.log(color); return ( {children} ); }; // 스타일 설정 함수 const setStyle = ({ color, size, variation, width }) => { // 색상 객체 const COLORS = { primary: "#774836", secondary: "#82363A", teritiaty..

티스토리툴바