soom 숨의 블로그 frontend developer

191118 TIL React Hooks - 훅마법사의 시대

Nov 18, 2019 » 1.5막, TIL (Today I Learned), 스터디, React.js

React Hooks - 훅마법사의 시대

  • 리액트 훅 관련 컨퍼런스에 참여했다. (월요일임에도 참석한 나자신 칭찬해…)

  • 여러 세션 중 가장 인상 깊었던건 useEffect 관련 세션이다.
    때마침 오후에 했던 일이, 계속 뷰랑 데이터랑 싱크가 안 맞아서 뭐가 문제지…!??! (막 짜증내다가.. )

    아 유즈이펙트가 그런 역할을 하는구나!! 를 느꼈다.

  • 또 인상 깊었던 건,, Best Practice는 없다는 거?? 나도 동감한 부분인데, 우리나라 사람들(엄청난 일반화…)은 항상 시도전에 최적의 조합, 최적의 방법을 미리 다 찾아보고 하는 습관이 있는 거 같다. (쓰고 보니 좋은거 같기도 한데???) 근데 그러다 보니 애초에 시도도 안하고 끝나는 경우가 “나는” 있더라..

    그래서 이제 좀 더 내 코드에 자신감을 갖고 이것저것 많이 써보겠어!!!

아래는 미래의 내가 비웃을 useEffect 없는 코드

import React, { useState, useEffect } from 'react';

const TimeTableRow = () => {
	// 과외 시간 입력 받아서 (1시간, 1시간반)
	const lectureMinutes = 90; // 임시값
	
	// const [selectedDay, setSelectedDay] = useState('-1');
	const [startBlocksToShow, setStartBlocksToShow] = useState([]);
	const [endBlocksToShow, setEndBlocksToShow] = useState([]);
	// const [startBlock, setStartBlock] = useState('');
	// const [endBlock, setEndBlock] = useState('');
	// const [selectedBlocks, setSelectedBlocks] = useState([]);
	
	/* 요일 선택 하면 시작 시간 뿌려주고, 시간 시간 선택하면 선택한 시간 + 과외 시간부터 끝나는 시간에 뿌려주기
	 필요한 함수
	 1. 15분 단위로 시간 블럭 만들어주는 함수
	 2. 1번 리턴 값 option에 넣어주는 함수 (렌더)
	 3. 앞선 단계 끝났는지 확인하는 함수
	 4. 선택된 시작시간 감지하는 함수
	 5. 선택된 시작시간 이후부터 +lectureMinutes 이후로 1~2
	 */
	
	const blockIds = {
		'mon': [36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101],
		'tue': [132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197],
		'wed': [228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293],
		'thu': [324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389],
		'fri': [420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449, 450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477, 478, 479, 480, 481, 482, 483, 484, 485],
		'sat': [516, 517, 518, 519, 520, 521, 522, 523, 524, 525, 526, 527, 528, 529, 530, 531, 532, 533, 534, 535, 536, 537, 538, 539, 540, 541, 542, 543, 544, 545, 546, 547, 548, 549, 550, 551, 552, 553, 554, 555, 556, 557, 558, 559, 560, 561, 562, 563, 564, 565, 566, 567, 568, 569, 570, 571, 572, 573, 574, 575, 576, 577, 578, 579, 580, 581],
		'sun': [612, 613, 614, 615, 616, 617, 618, 619, 620, 621, 622, 623, 624, 625, 626, 627, 628, 629, 630, 631, 632, 633, 634, 635, 636, 637, 638, 639, 640, 641, 642, 643, 644, 645, 646, 647, 648, 649, 650, 651, 652, 653, 654, 655, 656, 657, 658, 659, 660, 661, 662, 663, 664, 665, 666, 667, 668, 669, 670, 671]
	};
	
	const setBlocksByFifteenMin = (arr) => {
		let result = [];
		let hr = 9;
		let minuteArr = ['00', '15', '30', '45'];
		
		arr.forEach((id, index) => {
			if (index !== 0 && index % 4 === 0) hr++;
			let min = minuteArr[index % 4];
			let thisHr = hr;
			let textMsg = '오전';
			
			if (hr >= 12) textMsg = '오후';
			
			// 오후 일땐 - 12
			if (index > 15) thisHr = thisHr - 12;
			
			// 새벽 일땐 - 24
			if (thisHr > 12) {
				thisHr = thisHr - 12;
				textMsg = '오전';
			}
			
			textMsg += ` ${thisHr}시 ${min}분`;
			
			result.push({ blockGroupNo: id, text: textMsg });
		});
		
		// 과외 시간 만큼 뒤에서 빼기...
		return result;
	};
	
	// 나중에 state로 관리
	let selectedDay = '';
	// let startBlocks = [];
	// let endBlocks = [];
	let startBlock = '';
	let endBlock = '';
	
	const getSelectedDay = (e) => {
		selectedDay = e.target.value;
		// setStartBlocksToShow(setBlocksByFifteenMin(blockIds[selectedDay]));
		setStartBlocksToShow(setBlocksByFifteenMin(blockIds[selectedDay]));
		console.log('getSelectedDay: ', startBlocksToShow);
	};
	
	const getNextBlocksByFifteenMin = (e) => {
		startBlock = e.target.value;
		let arr = [...startBlocksToShow.filter(value => value.blockGroupNo >= startBlock)];
		
		// 과외 시간 /15 만큼 arr에서 빼기 ex. 90분 수업 -> 90/15 == 6 이니까 6블럭 빼기
		for (let i = 0; i < lectureMinutes / 15; i++) arr.shift();
		// setEndBlocksToShow(arr);
		setEndBlocksToShow([...arr]);
		console.log('getNextBlocksByFifteenMin: ', endBlocksToShow);
		
	};
	
	const gatherSelectedTimeBlocks = (e) => {
		endBlock = e.target.value;
		console.log('start: ', startBlock, '  end: ', endBlock);
	};
	
	return (
		<div>
			<select id="dayTable" onChange={(e) => getSelectedDay(e)}>
				<option value="-1">요일</option>
				<option value="mon">월</option>
				<option value="tue">화</option>
				<option value="wed">수</option>
				<option value="thu">목</option>
				<option value="fri">금</option>
				<option value="sat">토</option>
				<option value="sun">일</option>
			</select>
			
			<select onChange={(e) => getNextBlocksByFifteenMin(e)}>
				<option value="-1">시간 선택</option>
				{startBlocksToShow.map(block => (
					<option value={block.blockGroupNo} key={block.blockGroupNo}>{block.text}</option>))}
			</select>
			
			<span> ~ </span>
			
			<select onChange={(e) => gatherSelectedTimeBlocks(e)}>
				<option value="-1">시간 선택</option>
				{endBlocksToShow.map(block => (
					<option value={block.blockGroupNo} key={block.blockGroupNo}>{block.text}</option>))}
			</select>
			
			<span> X </span>
		</div>
	);
};

export default TimeTableRow;