728x90 반응형 SMALL 전체 글39 [React] Context API Context 일반적으로 데이터를 여러 컴포넌트들에 전해줘야 하는 props의 경우 사용이 번거로울 수 있습니다. 리액트의 Context API를 사용하면 프로젝트 내에 전역적으로 사용할 수 있는 값을 관리할 수 있습니다. 다시 말해, Context를 사용하면 일일이 props를 넘겨주지 않아도 컴포넌트 전체에 데이터를 제공할 수 있습니다. 데이터 다루기 HumanContext.js import React from 'react'; const HumanContext = React.createContext(); export default HumanContext; index.js import React from "react"; import ReactDOM from "react-dom"; import "./in.. 2022. 7. 26. [React] Additional Hooks useReducer 복잡한 정적 로직을 만드는 경우 사용. 다음 state기 이전 state에 의존적인 경우에 사용. Redux를 알면 쉽게 사용할 수 있음. import { useReducer } from 'react'; const reducer = (state, action) => { if (action.type === 'PLUS') { return { count: state.count + 1 }; } return state; } function ExReducer() { const [state, dispatch] = useReducer(reducer, {count: 0}); // 첫번째 인자로 함수가 들어감. return ( {state.count} ClickButton! ); function cli.. 2022. 7. 25. [React] 기본 Hooks State를 다루는 차이 class class ExState extends React.Component { state = { count: 0 }; render() { const { count } = this.state; return ( {count} ClickButton! ); } click = () => { this.setState({ count: this.state.count + 1 }); } } function import React from 'react'; function ExState() { const [count, setCount] = React.useState(0); // 배열 return ( {count} ClickButton! ); function click() { setCount(cou.. 2022. 7. 25. [React] 라이프사이클(Lifecycle) 컴포넌트 라이프사이클(Component LIfecycle) 리액트 컴포넌트는 그려지는 순간부터 사라지기까지 여러 지점에서 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해 줍니다. 마운트(mount) constructor : 생성자 메서드로 컴포넌트 생성 시 가장 먼저 실행됩니다. getDerivedStateFroProps : 새 props를 받았을 때 호출되며 받아온 것을 state에 넣고 싶을 때 사용합니다. render : 컴포넌트를 렌더링 합니다. componentDidMount : 컴포넌트의 첫 렌더링이 끝나면 호출됩니다. 업데이트(update) getDerivedStateFromProps : props나 state가 변경되어도 호출됩니다. shouldComponentUpdate : 컴포넌트.. 2022. 7. 25. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90 반응형
