개발 일기/React (9) 썸네일형 리스트형 [React] 자식 컴포넌트에서 부모로 callback 보내기 #onClick 이번에 개발을 하다보니 부모 뷰 에서 여러가지 컴포넌트들을 뷰에서 관리하고 동작하는 행동이 많았다. 자식 컴포넌트에서 부모로 데이터를 보내는 방법이 뭐가 있을까 하다가 찾아낸 방법이다. Home.js class Home extends Component { callback=(data)=>{ //여기서 자식에 응답이 왔을 경우 처리를 해준다. } render(){ return({ //여기서 넣어줌 }); } } 컴포넌트에서는 예를 들어 버튼이 클릭되었을 때 callback 함수를 실행 시켜 주면 된다. Compoent.js function Compoent({ callback }) { return({ CLICK }); } 쉽게 쉽게 통신이 가능하다. [React] react-route-dom, gh-pages 새로고침 #Router#reload react로 개발하고 깃허브 페이지에 올리면 새로고침할 경우 404 error가 우리를 반겨준다. 이런 문제를 해결하기 위해 react-router-dom에서 BrowserRouter를 썻다면 HashRouter로 바꿔줘야한다. [React] gh-pages로 react-router-dom 페이지 업로드할 경우 #gh-pages#react-router-dom 로컬에서 작업하듯이 하고 페이지를 git서버에 올리면 아무것도 없는 흰색 화면이 뜨는 경우가 있다. router의 설정 문제 때문이었다. import { BrowserRouter as Router } from "react-router-dom"; function App() { return ( ); } export default App; 제일 처음 라우터 설정에 basename={process.env.PUBLIC_URL} 설정을 꼭 붙여주자!! [React] axios 사용하기 #axios 제일 많이 쓰고 있는 axios 사용법을 간단하게 알아보자. 개인적으로 post를 제일 많이 쓰기 때문에 post를 예로 들었다. 서버와의 응답을 주고받는 일이기 때문에 비동기식 처리는 필수!! - 설치 $ npm install axios axios.js import axios from "axios"; export const postLogin = async (email, password) => { try { const response = await axios.post(`http://localhost:4000/login`, { headers: { "Content-Type": "application/x-www-form-urlencoded" }, email: email, password: password }).. [React] Material-ui로 디자인 하기 #@material-ui/core Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com Material-ui는 나 같은 디자인을 하나도 모르는 개발자에게 단비 같은 존재이다. 아이콘까지 있기 때문에 쉽게 디자인이 가능하다. - 설치 $ npm install @material-ui/core 공식 홈페이지에 있는 Tempate에 있는 소스코드를 참고하면 쉽게 디자인할 수 있다. 나는 class에서 makeStyles을 사용해 디자인을 커스텀 하고 싶었는데 실패했다... 그래서 임시 방편.. [React] ReactJS 페이지 전환 애니메이션 #react-transition-group 설치 $npm install react-transition-group --save 사용법 react-router와 같이 사용했다. App.js import React, { Component } from "react"; import { BrowserRouter as Router } from "react-router-dom"; import Routers from "./Routers"; class App extends Component { render() { return ( ); } } export default App; BrowserRouter로 쓰면 주소창에서 직접 페이지로 접속이 안됐는데 따로 빼서 사용하니까 직접 접속이 된다. (아직 더 알아봐야 함.) 라우터를 이렇게 설정하고 다음으로 넘어가자. Ro.. [React] Ant Design으로 Form 만들기 #antd React로 쉽고 이쁘게 페이지를 만드려고 하다가 찾은 antd. 써보려고 하니 여기저기서 문제가 생겨 이걸 내가 굳이 왜 쓰는거지 라는 생각도 들었지만 일단 열심히 써봤다. Layout 기본적으로 지원하는 레이아웃인데 커스텀하려고 하니 이것저것 꼬이는게 많아서 고생했다. CSS는 아직 너무 어려운 존재다... import { Layout} from "antd"; const { Header, Content, Footer } = Layout; class App extends Component { } 대충 이런식으로 쓰이는데 Footer라고 해서 제일 하단에 붙어있는게 아니였다.... 어짜피 내가 설정해줘야한다. 기본적인 틀만 잡고 Form으로 넘어가자. render() { const { getFieldDe.. [React] gsap 과 missing plugin? 이번에는 gsap로 애니메이션을 넣어보려고 한다. 공식 홈페이지의 예제를 참고했다. Main.css .gsap-event { opacity: 0; visibility: hidden; } CSS는 현재 설정한 애니메이션이 알파가 0에서 1로 변경되도록 해야 해서 넣어줬다. import { TimelineLite, CSSPlugin } from "gsap/all"; const plugin = CSSPlugin;///빌드하고 오류 안생기려면 꼭 넣어줘라!!! class Main extends Component { constructor(props) { super(props); this.state = { gsap: [] } this.eventTween = new TimelineLite({ paused: true .. 이전 1 2 다음
