본문 바로가기

React/react 기초 공부하기

React/react 기초 공부하기 2020. 6. 16. react styled-components 사용해보기 import React from "react"; import "./App.css"; import styled from "styled-components"; const color = "red"; const Component = styled.div` display: ${(props) => (props.isLoaded ? "block" : "none")}; color: ${color}; `; // 컴포넌트 상속받기 const Wrapper = styled(Component)` background-color: gray; margin: 20px; `; function App() { return ( complete ); } export default App; Styled-Components를 활용하면 컴포넌트를 생..
React/react 기초 공부하기 2020. 6. 14. redux 공부 하기(순수 리덕스만 사용해보기) https://velog.io/@velopert/Redux-2-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%97%86%EC%9D%B4-%EC%93%B0%EB%8A%94-%EB%A6%AC%EB%8D%95%EC%8A%A4-cijltabbd7 Redux (2) 리액트 없이 쓰는 리덕스 리덕스는 리액트에 종속되지 않습니다. 리액트에서 사용하려고 만든거긴 하지만, 실제로 다른 UI 라이브러리나 프레임워크와 함께 사용 될 수도 있습니다 (예: angular-redux, ember-redux...) 물론, 바닐 velog.io 해당글을 참고해서 개념 파악하는데 사용하였습니다. import { createStore } from "redux"; const lightDiv = document.getElemen..
React/react 기초 공부하기 2020. 6. 13. useEffect + axios를 활용하여 API 호출하기 class 기반 React에서는 lifeCycle 메소드들을 통해 관리하지만 https://loy124.tistory.com/230?category=784079 React LifeCycle 컴포넌트 생성 constructor (생성, setState 사용X), -> componentWillMount(렌더 되기전) -> render(그리는경우, setState 사용X) -> componentDidMount(렌더가 그려졌을때) 컴포넌트 제거 componentWillUnmount.. loy124.tistory.com react hooks 기반에서는 useEffect를 사용해서 lifeCycle을 관리한다. useEffect는 omponentDidMount와 componentDidUpdate, component..
React/react 기초 공부하기 2020. 5. 18. react setState와 useState 비교하기 간단한 카운트 함수 먼저 class 기반으로 생성된 setState를 활용한 카운트 증가함수이다 import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } setCount = () => { this.setState({ count: this.state.count + 1 }); }; render() { const { count } = this.state; return ( {count} ); } } 다음은 함수형을 기반으로 생성된 useState를 활용한 카운트 증가함수이다 useState를 import 한후 const [값, 값을변경할수있는..
React/react 기초 공부하기 2020. 5. 18. react setState this.setState를 활용하여 state내 내용을 바꿔준다 vue와 다른점이 있다면 vue는 data() { return { heart: require("../../assets/heart.png"), fillHeart: require("../../assets/fillHeart.png"), recentDatas: [] }; }, 해당방식으로 선언하여 this.recenDatas = "넣을값" 방식으로 바로 값을 대입해주는 반면 react는 setState를 활용해서 값을 대입해주고 또한 두번째 인자로 콜백함수로 받아오는 다른점이 있었다. import React from "react"; class App extends React.Component { constructor(props) { super(pr..
React/react 기초 공부하기 2020. 5. 18. React LifeCycle 컴포넌트 생성 constructor (생성, setState 사용X), -> componentWillMount(렌더 되기전) -> render(그리는경우, setState 사용X) -> componentDidMount(렌더가 그려졌을때) 컴포넌트 제거 componentWillUnmount 실행 컴포넌트 props 변경 componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate 컴포넌트의 state 변경 shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate 1. constructor props를 ..

티스토리툴바