React Basic - 16 . React 조건문

기본 세팅

npm을 통해 관련 플러그인과 설정 파일 webpack을 설치한다.(기본 사항)

더 이상 자세한 설명은 생략한다.

이번에 설정 파일을 한 곳에 몰아서 더 이상 설정 파일 설치를 안 하려고 한다.

package.json

{
  "name": "common_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "junsu",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/preset-env": "^7.22.7",
    "@babel/preset-react": "^7.22.5",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "babel-loader": "^8.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.10.0",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

반응 속도 테스트

반응속도 테스트로 만약 div 박스의 색깔이 초록 색으로 변할 때 클릭하면 반응 속도를 테스트하는 게임을 만들 예정이다.

import React, { Component } from 'react';

class ResponseCheck extends Component{
	state = {
			state : 'waiting',
			message : '클릭해서 시작하세요',
			result : [],
	};

	onClickScreen(){

	}

	render(){
		return(
			<>
				<div id="screen" className={this.state.state} onClick={this.onClickScreen}>
					{this.state.message}
				</div>
				{this.state.result.length === 0 
				? null 
				: <div>평균시간 : {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>}
			</>
		);
	}
}

export default ResponseCheck;

react에서의 조건문

react의 render 부분에서 조건문을 사용할 때는 보통 삼항연산자를 사용한다.

	render(){
		return(
			<>
				<div id="screen" className={this.state.state} onClick={this.onClickScreen}>
					{this.state.message}
				</div>
				{this.state.result.length === 0 
				? null 
				: <div>평균시간 : {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>}
			</>
		);
	}
}

				{this.state.result.length === 0 
				? null 
				: <div>평균시간 : {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>}

이 부분을 보면 만약 state의 result 배열에 값이 없을 때는 null로 처리하고 있다.
jsx에서 null은 태그 없음을 의미한다.

이 부분이 지저분하면 함수로 빼서 사용해주어도 된다.

import React, { Component } from 'react';

class ResponseCheck extends Component{
	state = {
			state : 'waiting',
			message : '클릭해서 시작하세요',
			result : [],
	};

	onClickScreen = () =>{

	}

	renderAverage = () =>{
		const {result} = this.state;
		return 	result.length === 0 
			? null 
			: <div>평균시간 : {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>
	}

	render(){
		const {state, message} = this.state;
		return(
			<>
				<div id="screen" className={state} onClick={this.onClickScreen}>
					{message}
				</div>
				{this.renderAverage()}
			</>
		);
	}
}

export default ResponseCheck;