REACT (16) 썸네일형 리스트형 Hooks 와 state import React, { useState } from 'react'; function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 아래의 클래스 예시와 비교하며 Hook의 특징에 대해 배울 예정입니다. Hook과 같은 기능을 하는 클래스 예시 React에서 클래스를 사용해봤다면, 아래의 코드는 익숙할 겁니다. class Example extends React.Component { constructor(props) { super(props); this.state =.. 리액트 이벤트 연습 const eventbox = document.querySelector(".phoneclass"); function park1 () { console.log(eventbox.value); } eventbox.addEventListener("keypress",park1); 바닐라 자바스크립트 에드이벤트리스너를 리액트로 바꿔보자. //onKeyPress input 태그에서만 쓸수있는 리액트 이벤트 함수 good = () => { console.log(eventbox.value); } good이라는 함수를 정의해놓고 input태그안에 쓸수있는 이벤트 함수를 넣어놓고 this.good이라는 함수를 넣는다. 키워드를 누를때마다 그러면 this.good이라는 함수가실행된다. 즉 콘솔실행 onkeyPress라는 이벤.. componentDidmount() 레더링이 실행되었을때 한번 실행하는 함수 예를 들면 fetch("http://10.58.0.129:8000/reviewdetail/sign-up", { method: "POST", // headers: { // "token": localStorage.setItem("wtw-token") // }, body: JSON.stringify({ email: this.state.email, password: this.state.password }) }) 대표적인 예가 fetch함수이다. 렌더링이 실행되고 딱한번 실행해서 값을 보내는 것이다. 리액트 toggle import React from "react"; class CustomButton extends React.Component { constructor() { super(); this.state = {clicked:true }; } handleClick = () => { this.setState({clicked:!this.state.clicked}) render() { console.log(this.state.clicked); let circleimg; if(this.state.clicked === true){ circleimg = "https://img.icons8.com/material-rounded/24/000000/circled.png" } else if(this.state.clicked===fal.. 리액트 세팅 리액트 props state 의 차이 props는 부모와 자식이있으면 부모의 영향으로 자식을 변하게 할수있다. 재사용성 state는 실행한다음 setstate로 변화를 주기위함이다 리액트 props 2 import React from "react"; class Person extends React.Component { render(){ return( 이름은{this.Props.name}나이는 :{this.Props.age} ) } } // // 이름은{Props.name}나이는 :{Props.age} // // ); export { Person }; es6버전 import React from "react"; class Person extends React.Component { render(){ const {name,age}=this.props; return( 이름은:{name}나이는 :{age} ) } } // // 이름은{Props.name}나이는 :{Props.age} // // ); export .. props class Codelab extends React.Component { //Codelab라는 하위 컴포넌트이다. render(){ return( hellow {this.props.name} ///네임이라는 컴포넌트를 받는다. {this.props.children} ///칠드런은 사이에 있는것을 받음 ); } } class App extends React.Component{ ///최상위 컴포넌트 render(){ return( this.props.name}>{this.props.children } ); ///{this.props.children }에는 i am your children들어간다. } //왜냐면 컴포넌트 태그 사이에 들어가는것이 디스 칠드런에 들어가기 때문이다. } ReactDOM.render.. 이전 1 2 다음
