이제 첫 컴포넌트를 만들어 보았으니
컴포넌트를 더 추가하기 전에
이런 컴포넌트에 더욱 동적인 내용을
출력할 수 있는지를 살펴보고자 합니다
우리의 JSX 코드에는
이 헤더 컴포넌트에
고정적으로 한 내용만
출력하기 보다
'Fundamental React concepts' (기초 리액트 개념)
또는
'Crucial React concepts' (꼭 필요한 리액트 개념)
또는
'Core React concepts' (주요 리액트 개념)
이 세 가지 용어를 번갈아가며 출력할 예정입니다
이 세 가지를 임의로 선택하여 변동되게 하는 것이
코드에 추가할
중요한 새 기능이 될 것입니다
이 목표를 달성하기 위해
내용을 동적으로 출력해야 합니다
리액트에서 자주
실행하는 작업일 것이고
이 강의에서 제대로 배워야 합니다
새로운 JSX 파일이 첨부된 것을 확인한 후
파일을 교체하시면 됩니다
파일 교체 후
이 다섯 줄의 코드가
추가된 것을 볼 수 있습니다
물론
다섯 줄의 코드를 직접 복사하고
앱 JSX 파일에 붙여도 됩니다
이제 코드에
이와 같은 단어를 나열하고
무작위로 숫자를 생성하는 함수를 넣습니다
함수를 통해 생산된
임의 인덱스를 통해
무작위로 여러가지 단어를
접근할 수 있게 됩니다
그러기 위해 동적인 값이
필요한 위치로 가야 하는데
헤더 컴포넌트 함수에서 찾을 수 있습니다
여기에 'Fundamental'을 출력하는 대신
무작위 단어를 출력하고자 합니다
그러므로 이 JSX 코드에는
'Fundamental' 또는 'Core'와 같이
불변동 값을 원하지 않고
동적인 값을 출력하려고 합니다
JSX 또는 리액트에는 중괄호{}를 사용할 수 있습니다
시작과 끝에 한 쌍의 중괄호를 넣으시면 됩니다
JSX 코드에 중괄호를 넣을 때
이런 식으로 요소 태그 사이에 넣을 수 있고
속성 값으로서
JSX와 리액트에게
동적인 값을 출력하고 싶다고 명령할 수 있습니다
정확히 말하자면
이 중괄호 사이에 원하는
자바스크립트 표현을 자유롭게 추가할 수 있습니다
중괄호 사이에 넣은 자바스크립트
표현 코드가 실행되고
그 표현의 값이 되는 것입니다
예를 들면 이 계산 결과가
화면에 출력 되는 것입니다
이 중괄호 사이에 1 더하기 1을 넣으면
화면에 2라고 나옵니다
이것이 원리입니다
이 중괄호 문법이
불변동 내용과 동적 값을 혼합하는
문법이므로
매우 중요한 내용입니다
그러므로 여기서 reactDescriptions라는
배열을 볼 수 있는데
realDescription 상수에 저장되어 있으며
인덱스별로 요소에 접근할 수 있습니다
getRandomInt 함수로 인해
그 인덱스가
이와 같이 생성됩니다
이 함수는 생성하고자하는 값의 최대치인
한 가지 인수를 받아들입니다
이 인덱스에는
3개 값이 있는데
그 전 요소의 인덱스가 2개였기 때문에
제가 원하는 최대치는 2개 입니다
그리하여 getRandomInt에 인수를
2로 설정합니다
정정하는데 함수의 이름은 getRandomInt가 아닌
genRandomInt입니다
이를 저장하면 'React concepts' 앞에
'Fundamental' 또는 'Crucial'
또는 'Core' 가 나오는 것을 볼 수 있습니다
페이지를 새로고칠 때마다
새로운 단어가 나오는 것을 볼 수 있습니다
이 것이 헤더 컴포넌트가 생성되고 랜더링 된 시점으로
헤더 컴포넌트 함수가
React에서 실행된 위치이기 때문입니다
이에 따라 코드가 실행된
시점이기도 합니다
이제 이 코드를
JSX 코드에서 빼서
변수 또는 상수에 저장할 수 있습니다
이름을 이와 같이 'description'으로 지정하여
변수 또는 상수에서 참조할 수 있습니다
이렇게 자바스크립트 표현을
코드 밖으로 옮기면 JSX 코드가 조금 깔끔해 질 수 있어
일반적으로 좋은 관례로 여깁니다
이전 코드도 작동이 됐으나
보통 JSX 코드를 단정하게 유지하는 것을 선호하여
표현 결과는 다른 곳에 저장하고
상수에 불러들이는 용도로
사용한 것이 좋을 수 있습니다
어느 방법을 사용하든 코드가 작동하는 것을 확인했고
페이지를 새로고침하면
단어가 변경 됩니다