WEBVTT

0
00:00.990 --> 00:02.370
이제 어떤 탭 버튼을

1
00:02.370 --> 00:04.800
눌렀는지에 따라 여기에

2
00:04.800 --> 00:07.323
다른 콘텐츠를 출력하도록 하겠습니다

3
00:08.220 --> 00:12.840
그리고 이를 위해 변수를 사용해 볼 수 있습니다

4
00:12.840 --> 00:17.250
여기 이 앱 컴포넌트 함수에 변수를 추가할 수 있으며

5
00:17.250 --> 00:19.713
tabContent라고 이름을 붙입니다

6
00:20.820 --> 00:25.600
그리고 처음에는 'Please click a button' (버튼을 클릭해주세요)라고 말할 수 있지만

7
00:27.540 --> 00:31.500
handleSelect가 실행되면

8
00:31.500 --> 00:34.770
tabContent 변수를 업데이트하고

9
00:34.770 --> 00:37.260
selectedButton과 동일하게 설정한다고 가정해 보겠습니다

10
00:37.260 --> 00:39.910
이 식별자는

11
00:40.890 --> 00:43.650
제가 원하는 최종 결과는 아니지만

12
00:43.650 --> 00:45.693
좋은 첫 단계가 될 것입니다

13
00:46.620 --> 00:50.100
이제 tabContent 변수를 이전에 배운 대로

14
00:50.100 --> 00:54.060
사용할 수 있고 중괄호를 사용해

15
00:54.060 --> 00:56.043
아래에 동적으로 출력할 수 있습니다

16
00:57.570 --> 00:59.940
이제 tabContent을 출력하고

17
00:59.940 --> 01:03.480
저장하면

18
01:03.480 --> 01:06.033
'Please click a button' (버튼을 클릭해주세요) 라는 시작 문구가 보입니다

19
01:07.470 --> 01:12.470
제가 여기를 클릭하고 있는데

20
01:12.750 --> 01:15.780
이 버튼들을 눌러도

21
01:15.780 --> 01:17.010
텍스트가 바뀌지

22
01:17.010 --> 01:21.270
않는 것이 보입니다

23
01:21.270 --> 01:22.683
똑같습니다

24
01:23.700 --> 01:26.223
코드가 작동 안하는 것 같습니다

25
01:27.720 --> 01:31.020
버튼을 클릭한다는 것을 확인하기 위해

26
01:31.020 --> 01:34.020
handleSelect 설정 후 그 안에서

27
01:34.020 --> 01:36.813
tabContent를 console.log하겠습니다

28
01:38.610 --> 01:41.490
그러고 새로고치면

29
01:41.490 --> 01:45.303
오른쪽에 로그 문장이 나옵니다

30
01:46.140 --> 01:49.860
그러나 텍스트가 업데이트 되지 않습니다

31
01:49.860 --> 01:52.530
이를 보니 함수가 실행이 되고

32
01:52.530 --> 01:57.530
변수를 업데이트하고 있으나 UI가 업데이트 되지 않는 것입니다

33
01:57.960 --> 02:01.380
앱 컴포넌트 함수가 실행되지 않아

34
02:01.380 --> 02:06.120
UI가 업데이트 되지 않는 것입니다

35
02:06.120 --> 02:09.393
handleSelect 함수가 실행되었어도 말입니다

36
02:10.740 --> 02:11.850
앱 함수가

37
02:11.850 --> 02:15.210
또 실행되지 않기 때문에

38
02:15.210 --> 02:20.210
모든 JSX 코드가 재평가 되지 않는 것입니다

39
02:20.850 --> 02:25.030
리액트는 JSX 코드를 보고 현재 렌더링된

40
02:26.070 --> 02:29.250
UI와 비교하기 때문에

41
02:29.250 --> 02:33.810
UI를 업데이트하려면

42
02:33.810 --> 02:37.800
이 코드가 리액트에 의해 재평가되어야 하기 때문에

43
02:37.800 --> 02:41.490
여전히 초기 tabContent 값만 알고 있습니다

44
02:41.490 --> 02:43.950
그리고 변화를 탐지한다면

45
02:43.950 --> 02:46.413
그에 맞춰 UI를 업데이트 할 것입니다

46
02:49.050 --> 02:53.760
지금 이 코드는 한번만 실행되기 때문에

47
02:53.760 --> 02:56.070
새로운 내용이 감지되지 않아

48
02:56.070 --> 02:58.203
UI가 업데이트되지 않습니다

49
02:59.130 --> 03:00.240
기본적으로 리액트는

50
03:00.240 --> 03:02.820
컴포넌트 함수를 코드 내에서 처음 발견했을 때

51
03:02.820 --> 03:07.770
한 번밖에 실행하지 않는다는 걸

52
03:07.770 --> 03:11.700
반드시 염두하고 있어야 합니다

53
03:11.700 --> 03:14.010
예를 들어 App 컴포넌트 함수는

54
03:14.010 --> 03:17.730
index.jsx 파일에서 처음 발견됩니다

55
03:17.730 --> 03:20.460
리액트가 해당 함수를 실행하고 렌더링하는

56
03:20.460 --> 03:23.880
시점이 바로 여기에 있습니다

57
03:23.880 --> 03:26.550
다른 예시로TabButton Component는

58
03:26.550 --> 03:28.410
App 컴포넌트가 실행하고 렌더링될 때

59
03:28.410 --> 03:31.380
처음 발견됩니다

60
03:31.380 --> 03:34.110
그러므로 그때 TabButton 컴포넌트 함수가

61
03:34.110 --> 03:36.270
실행되고 렌더링됩니다

62
03:36.270 --> 03:37.320
그러나 그 후에는

63
03:37.320 --> 03:40.803
두 함수 모두 실행되지 않습니다

64
03:41.820 --> 03:44.550
그리고 App 컴포넌트 함수 안에

65
03:44.550 --> 03:46.860
console.log 문장을 추가하면

66
03:46.860 --> 03:50.310
이런 내용을 알고 이해하게 될 것입니다

67
03:50.310 --> 03:52.560
그러니 handleSelect 안이 아닌

68
03:52.560 --> 03:55.080
App 컴포넌트 함수 안입니다

69
03:55.080 --> 03:59.670
그리고 App 컴포넌트 렌더링을 로그로 출력하는 등

70
03:59.670 --> 04:02.613
원하는 것을 실행하면 됩니다

71
04:04.320 --> 04:06.000
그러니 여기서 로그를 출력하고

72
04:06.000 --> 04:09.393
이것을 TabButton에서 로그 출력할 수도 있습니다

73
04:10.470 --> 04:14.403
여기에 'TABBUTTON COMPONENT EXECUTING '이라고 입력하고

74
04:15.630 --> 04:18.240
저장하고

75
04:18.240 --> 04:19.620
새로고침하면

76
04:19.620 --> 04:23.793
APP COMPONENT EXECUTING이 한번 출력되고

77
04:24.690 --> 04:28.170
TABBUTTON COMPONENT EXECUTING은

78
04:28.170 --> 04:32.493
4개 버튼이 있기 때문에 4번 출력됩니다

79
04:34.770 --> 04:37.560
그러므로 TabButton Component가

80
04:37.560 --> 04:40.230
UI에서 4번 볼 수 있습니다

81
04:40.230 --> 04:43.890
이제 리액트는 각각의 컴포넌트 함수를

82
04:43.890 --> 04:47.013
JSX 코드에서 볼 때마다 실행할 것입니다

83
04:48.660 --> 04:52.530
그러나 이 버튼 중 하나를 누르면

84
04:52.530 --> 04:57.240
이 로그 메시지들이 또 출력되지 않는 것을 볼 수 있습니다

85
04:57.240 --> 04:59.100
eventHandler 함수 안에 있는

86
04:59.100 --> 05:02.190
다른 로그 메시지 밖에 없습니다

87
05:02.190 --> 05:05.670
컴포넌트 함수가 또 실행되지 않는 것인데

88
05:05.670 --> 05:09.510
그렇기 때문에 이와 같은 일반적인 변수로는

89
05:09.510 --> 05:14.010
UI를 업데이트 할 수 없는 것입니다

90
05:14.010 --> 05:17.250
그러므로 컴포넌트 함수가 재실행되어야 한다는 것을

91
05:17.250 --> 05:20.760
리액트에게 알려줄 방법을 찾아야 합니다

92
05:20.760 --> 05:23.490
이 때문에 매우 중요한 개념인

93
05:23.490 --> 05:25.470
state(상태)가 필요한 것입니다

94
05:25.470 --> 05:27.873
다음 수업에는 state(상태)에 대해 배우도록 하겠습니다