React 46
6. 클래스 컴포넌트에 값 할당, 함수, 버튼에 함수 바인딩, state

import { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { number: Number(props.number), }; } increase = ()=>{ this.setState({ number : this.state.number+1 }); } decrease = ()=>{ this.setState({ number : this.state.number-1 }); } render() { // console.log(this.state); return ( 사용 상품 수량 수량 : {this.state.number} +1 -1 ); } } 여기 보면 생성자에서 p..
React 2023.10.23

5. 한 컴포넌트의 최상위 요소

Hello 이렇게 하면 뭐랄까.. 그러니까, Hello React V18 이거는 곁에 한번 감쌈. 실제로 브라우저에서 랜더링 될 때 이렇게 감싸서 h1 나오는 거임. class가 아니고 className인 이유는 js의 class랑 중복되서 저러는 듯. 근데, Hello 이렇게 하면 곁에 감싸는 거 없이 들어가는 거임. Hello 저 Fragment로 감싼거랑 똑같은 거임. 위에는 축약임. 그냥 암거나 쓰면 됨.
React 2023.10.23

4. 한 js에서 컴포넌트 2개

import { Component } from "react"; class Counter extends Component { constructor(props){ super(props); this.state = { number : 1 } } render() { return ( 사용 상품 수량 수량 : {this.state.number} +1 -1 ); } } class ClassComp extends Component { render() { return ( 클래스형 컴포넌트 ); } } export default ClassComp; 뭐랄까 1회용? 딱 그냥 여기서만 이 컴포넌트 쓰겠다, 짝꿍이다 하면 분리하지 말고 이렇게 하는 것도 괜찮을 듯. 그냥 똑같이 호출하면 됨. 예를 들자면 import가 저 Cou..
React 2023.10.23

3. 구조

일단은 최상위 컴포넌트 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 얘는 저렇게 root에 직접 연결해서 render, #root에다 전해주는 애임. 여기다 필요한 거 불러다 쓰면 됨. 그 다음, 컴포넌트는 2가지 스타일이 있음. 함수형 import './main.css'; function Main(){ return ( Hello React V18 ) } export default Main; css import 하는 건 일단 무시하고, 저렇게 function 컴포넌트명(){ return( 요소 ) } export default 내보낼것 return 안에다 요소를 쓰면 됨. 내보낼 것은 지금같은 경우 저..
React 2023.10.23
1 2 3 4 5
더보기

티스토리툴바