Framework/react26 [리액트] 클래스형 컴포넌트 함수형 컴포넌트로 변환하기. Assignment to constant variable. https://belle-sooir.tistory.com/126 함수형 컴포넌" data-og-host="belle-sooir.tistory.com" data-og-source-url="https://belle-sooir.tistory.com/126" data-og-url="https://belle-sooir.tistory.com/126" data-og-image="https://blog.kakaocdn.net/dna/6Vj20/hyWoLLLuFi/AAAAAAAAAAAAAAAAAAAAAHNTITgBnnn_b2DixQbBdKXmtaoCjPNSfbJOvTt_Q-mR/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=bV1rEXnGVSlBy1UQHT4ZshYCe3s%3D 2024. 6. 20. [리액트 틱택토 게임 응용하기] part 1_2 말의 갯수 8개로 제한하기 나의 계획 PLAN 1.말의 개수를 담은 변수 정의하기. -> const letonClick이벤트에 클릭할때마다 하나씩 줄어들도록 하는 조건 추가하기.말의 개수가 0이상일 때만 클릭되도록 하기. 구체화된 계획설정: 하나 둘때마다 올라가는 숫자를 '카운트'라 지칭 1. 카운트가 8이 되면 0으로 변경(초기화) 2. 카운트가 0->8 이 아닌 8->0 순으로 변경 3. 카운트가 0이되면 보드가 클릭되지 않도록 설정 Game.js 에 추가. --> 저장되는 history의 길이를 이용하였다.class Game extends React.Component { ...render() { ... const count = 9-history.length ... return ( ); .. 2024. 6. 17. [리액트 css]테이블 만들기 table thead tr td Game.js div className='game-score'> table> thead> tr>td>Xtd>td>Otd>tr> thead> tbody> tr>td>{this.state.APlayer}td>td>{this.state.BPlayer}td>tr> tbody> table> div> App.css.game-score table{ border: 1px solid black;}/* .game-score table tbody { border: 1px solid black;} */.game-score tr td { border: 1px s.. 2024. 6. 15. [리액트 틱택토 게임] 함수형 컴포넌트를 클래스형으로 바꾸기 클래스형 컴포넌트import React from 'react';class Square extends React.Component { render() { return ( button className="square" onClick={this.props.onClick}> {this.props.nums} button> ); }}export default Square; 함수형 컴포넌트import React from 'react'; function Square(props) { return ( button className='square' onClick={props.onClick}> {props.nums} button> );.. 2024. 6. 14. [리액트 틱택토 게임]this.props.children 이해하기, props 이해하기 말의 개수 제한하기를 하기 전에,props와 this.props.children에 대해 살펴본다.리액트 컴포넌트는 props로 children이라는 것을 받는다. Props란?props 는 properties 의 줄임말 (어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용)여러개의 props는 비구조화 할당으로 간결하게 작성defaultProps 로 기본값 설정가능props.children컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 컴포넌트 구조를 보자. Game이라는 최상단의 부모가 있고,그 아래에 Board그리고 그 자식으로 Square가 있는 것을 알 수 있다. Board.jsimport React from 'react';import Square from './Sq.. 2024. 6. 14. [리액트] map으로 배열 렌더링하기 [React] map( )을 이용한 배열 렌더링 (feat.일기장)💡map() 이란? 자바스크립트 배열 내장함수 리액트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열velog.io import "./styles.css";import Name from "./Name.js";import Age from "./Age.js";import React, { Component } from "react";import NameAge from "./NameAge";import DiaryList from "./DiaryList";const info = [ { id: 1, first: "D", last: "Him.. 2024. 6. 13. 이전 1 2 3 4 5 다음
