이제 참조 기능에 대해 더 깊게 살펴보고
정말 유용한
다른 적용 사례들을 살펴보기 전에
이 앱은 더 발전되어야 하며 실제 기능들을 추가해서
이 웹 앱에 갖춰야 할 것들을 만들어야 합니다
이 타이머들을 추가하고
그 타이머와 연관된 도전들을 추가해야 하므로
이 프로젝트에 새로운 컴포넌트를 추가하겠습니다
TimerChallenge 컴포넌트를 추가하겠습니다
이 리액트 앱은 사실상 이
타이머 도전을 다루는 게 전부입니다
그래서 이 TimerChallenge 함수를
이 TimerChallenge.jsx 파일에 default export 해줍니다
그리고 거기에 jsx 코드도 조금 반환하고 싶습니다
section을 만들어서 클래스 이름은 challenge로 짓습니다
스타일링을 위해 중요한 부분입니다
이 CSS 파일을 사용합니다
초기 프로젝트의 일부로
모든 css 규칙들이 들어있습니다
그리고 이 새로운 컴포넌트의 이 섹션에
h2 요소가 있어야 그 특정 도전에 대한
제목을 출력할 수 있습니다
여기서의 개념은 이 컴포넌트가
다른 설정들로 재사용될 수 있게 하는 것이고
그러니 여기에다 속성 객체의
title 속성을 하나 만들어줍니다
이건 여기 출력될 title (제목)입니다
물론 이걸 만들어낼 수 있는 이유는
이게 우리 프로젝트이자 컴포넌트이기 때문에
이걸 우리가 필요한대로 사용하고 설정할 수 있습니다
제목 밑에는 paragraph가 있어야 하는데
challenge-time이라는 css 클래스를 부여합니다
그리고 거기서 도전 목표를 출력하고 싶습니다
그러니까, 타이머가 시작되면
부여되는 시간입니다
그리고 그 시간을 사용자들이 보고 짐작하여
타이머가 끝나기 전에 멈춰야 합니다
결국 그게 이 도전의 목표입니다
그러니 여기서는 또 기대할 수 있는 것은
예를 들어 targetTime (목표시간) 속성입니다
그리고 이 p태그 안에서
targetTime 'seconds' (초)를 출력할 수 있습니다
물론 1초라면 복수형이 붙으면 안 되니까
seconds가 아니라 second여야 합니다
그러므로 이 s를 조건적으로 targetTime에 따라 붙여보겠습니다
1보다 크냐 안 크냐에 따라서 말입니다
1보다 크다면, second 뒤에 s를 추가하고
1보다 크지 않다면, 붙히지 않겠습니다
그리고 이 p 요소 밑에
또 다른 p 요소가 있어야 하는데
그 안에 타이머를 멈추거나 시작하는 버튼이 있습니다
도전 시작이나 도전 끝내기, 이런 식으로 쓰여 있어야 합니다
게임에 실행 여부에 따라 달렸습니다
그리고 그것은 물론
나중에 상태로 제어할 부분입니다
이 p 요소 밑에
또 p 요소를 추가해서 클래스 이름은
타이머가 실행될 땐 active(활성화)로
실행 중이 아닐 땐 비워둘 것입니다
그러니 여기서도 상태가 필요합니다
그리고 여기 '타이머가 실행 중입니다...'를 타이머가 실행 중일 때 보여주고
'타이머가 비활성화됐습니다'를 실행 중이지 않을 때 보이겠습니다
이것 또한 조건적으로 출력되어야 합니다
그래서 이 timerChallenge를
앱 컴포넌트에서 사용해야 합니다
여기엔 challenges라는 id를 가진 div가 보입니다
그리고 이 div에서
TimerChallenge 컴포넌트를 출력하겠습니다
물론 그러기 위해서는 import해야 합니다
그리고 여기 첫 번째 인스턴스에
예를 들어 easy라는 제목의 컴포넌트가 있습니다
쉬운 단계이니 targetTime(목표시간)이 1, 그러니까 1초로 지정할 수 있을 것입니다
그리고 또 다른 도전으로 이번에는 Not Easy, 쉽지 않은 단계입니다
targetTime은 5초입니다
그리고 또 도전을 추가해서 이름은 'Getting tough' (조금 어려움)으로 짓겠습니다
이번엔 10초 타이머입니다
그리고 마지막 도전은 Pros only (고수만 도전) 입니다
그리고 15초 타이머라고 해봅시다
그리고 저장하면
이 4개의 타이머들이 화면에 보입니다
하지만 아직은 이 버튼을 누른다고 해서
아무런 일도 생기지 않습니다
하지만 지금부터 상태와 참조를 또 사용해서
이를 작업해보겠습니다