반응형 Props4 React Hooks React Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리입니다. 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있으며 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 서로의 장점을 전부다 가지고 있습니다. Hooks 간단 소개 1. useState: 컴포넌트의 state(상태)를 관리 할 수 있습니다, 2. useEffect: 어떤 변수가 변경될때마다, 특정기능이 작동하도록 할 수 있습니다. 3. useContext: 여러개의 컴포넌트에서 사용할 수 있는, 변수 or 함수를 만들 수 있습니다. ( 전역으로 관리 ) 4. useReducer: state(상태) 업데이트 로.. 2022. 5. 16. ReactJs - props 와 state props 와 state 리액트 컴포넌트에서 다루는 데이터는 props, state 이 두개로 나뉜다. props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다. 반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. props 아래와 같이 새 컴포넌트를 만든다. Name.js import React, { Component } from 'react'; class Name extends Component { render() { return ( Hi My name is {this.props.name} 입니다. ); } } export default Name; 자신이 받아온 pro.. 2021. 1. 5. ReactJs - 이벤트 이벤트 리액트는 사용자와 상호작용하는 애플리케이션의 핵심인 이벤트를 리액트에서 구현하는 방법이 있다. 이벤트 state props 그리고 render 함수 App.js import React, {Component} from 'react'; import Subject from "./component/Subject" import TOC from "./component/TOC" import Content from "./component/Content" import './App.css'; class App extends Component { constructor(props){ super(props); this.state = { mode: 'TEST1', //추가 TEST1:{title:'TEST1', desc:.. 2020. 12. 31. ReactJs - state state React는 컴포넌트를 외부에서 조작할 때는 props를 내부적으로 상태를 관리할 때는 state를 사용한다. 기본 state의 개념 App.js mport React, {Component} from 'react'; import Subject from "./component/Subject" import './App.css'; class App extends Component { constructor(props){ //class안에서는 constructor의 함수는 생성자 함수이다. super(props); //super 메소드는 App 자신의 부모 Component에게 props라는 인자를 넘겨준다. this.state = { // super 메소드 이후 나오는 this도 부모의 함수안의 th.. 2020. 12. 31. 이전 1 다음 반응형
