이제 누른 버튼에 따라
다른 데이터를 출력할 수 있게 되었습니다
예전에는 페이지가 처음 로딩될 때
이 Components 데이터가 화면에 나왔습니다
이것도 물론 괜찮고
문제가 없습니다
다만, 우리가 원하는 동작은 아닙니다
초기에 Components 데이터 대신에
'please select a topic'(주제를 선택해주세요)와 같은
정보 텍스트를 보여주길
원할 수도 있습니다
그러므로 이 상태에는
아무것도 선택하지 않음을 알리기 위해
초기 값은 빈 문자열이어야 합니다
초기에 주제를 선택하지 않기 때문에
null이라고 표시하거나 공백으로 표시할 수도 있습니다
물론 지금 저장해도 페이지에 오류가 생깁니다
이제부터 할 것은
리액트 프로그램에서 앞으로 자주 할 일입니다
내용을 조건적으로 출력해야 하는 것입니다
데이터를 포함한 이 마크업은
주제를 골랐을 때만
출력하고 싶습니다
주제를 고르지 않았다면
'Please select a topic' (주제를 골라주세요)와 같은 대체 텍스트를
출력하게 만들고 싶습니다
이 코드를 사용해 이 문단이 나오게 하거나
이 코드를 사용하여 이 정보가 나오게 할 수 있습니다
앞서 말한 것과 같이 리액트에서
조건적으로 내용을 출력하는 기능을 자주 사용할 것입니다
이 기능을 사용하는 것에는
여러 방법이 있습니다
주제를 고르지 않았을 때
이 문단을 보여줄 수 있는 첫 번째 방법은
동적인 내용을 출력하기 위해
여기에 중괄호를 시작과 끝에 넣고
삼항(조건) 연산자를 사용하는 것입니다
원래 정의하지 않았는데
이제 더이상 초기 값을 설정하기 않기 때문에
이제 selectedTopic 상태를 사용할 수 있습니다
그리고 이것이 undefined (정의되지 않음)과 동일한지 확인합니다
자바스크립트로는 더 짧은데
앞에 느낌표를 추가해
값이 true인지 확인할 수 있습니다
선택한 주제가 true가 아니라면
대체 텍스트를 보여주기 위해
여기에 삼항 연산자를 사용할 수 있습니다
그 외에는 null이라고 표시됩니다
null은 JSX 코드로 출력할 수 있는 것인데
단순히 아무것도 렌더링되지 않는 것입니다
이것으로
선택한 주제가 없다면
이 문단을 렌더링하라는 것입니다
그 외에는 아무것도 렌더링 되지 않습니다
반대의 조건이 맞다면
이 div를 보여주려 하는데
이 div 전체를 보여주는 것 대신에
이것을 하는 것이 좋을 수 있습니다
선택한 주제가 true라면
즉, undefined와 동일하지 않다면 이렇게 작성하거나
자바스크립트로 더 짧게 true면 이렇게 작성할 수 있습니다
이런 상황이라면 이 div를 렌더링하게 됩니다
이걸 이 곳에 붙입니다
그 외의 경우 아무것도 렌더링하지 않습니다
서식을 정리하고 나면 코드가 이렇게 생겼습니다
이제 두 개의 정반대 조건이 있는데
이 문단을 렌더링하거나 이 div를 렌더링하게 됩니다
물론 이를 모두
하나의 삼항 연산자로 합병해서
div를 여기에 넣고
null 대신에 이것을 렌더링 할 수도 있습니다
결국 이 메세지를
보여주는 것에 대한 대안이기 때문입니다
그래서 이렇게 코드를 줄일 수 있습니다
두 방법 모두 유효합니다
이제 저장하면
초기에 'Please select a topic'이 보입니다
콘솔에도 더이상
오류가 없는 것도 보입니다
그리고 Components, JSX 또는 다른 버튼을 누르면
각각의 주제에 맞는 내용이 나옵니다
지금까지 조건적으로 내용을 렌더링하는 방법 중 한 가지였습니다
대안으로 두 개의 동적인 부분을
사용하는 방법이 있습니다
else 조건인 null을 제외하면서
더 간략하게 작성할 수 있습다
여기에 물음표를 사용하는 대신
두 개의 앤드 기호(&)를 사용할 수 있습니다
즉, 논리적 AND 연산자입니다
이 문법으로
자바스크립트로 약간의 속임수를 쓰는 것입니다
조건이 사실이라면
AND 연산자가 바로 뒤에
나오는 값을 출력하기 때문입니다
그러므로 선택한 주제가 없다면
이 문단이 출력되는 것입니다
그러므로 이 AND 연산자를 사용하고
else의 내용을 제거할 수 있습니다
그리하여 이렇게 작성할 수도 있습니다
이제 저장하고 새로고침하면
지난번과 같은 동작이 보입니다
방법을 정하는 것은 여러분의 취향에 달렸습니다
이 방법이 삼항 연산자를 사용하는 것보다 짧을 수 있습니다
그리고 합쳐진 삼항 연산자를 사용하는 것보다
이 두 부분을 사용하는 것이 보다 읽기 편하고
이해하기 쉬운 코드로 이어질 수 있습니다
그런 이유로 이 방법도 여러분에게 보여준 것입니다
마지막 대안이 또 있는데
이렇게 많은 대안책을 보여주는 이유는
이런 방법을 모두 리액트 프로젝트에서
사용하기 때문입니다
이렇게 자주 사용되기 때문에
리액트 개발자로서 필수적으로 알아야 합니다
마지막 대안은 변수를 사용하는 것입니다
여기에 tabContent라는
변수를 만들어 봅니다
이곳에서 상태를 저장하려는 것이 아니며
이사다시피 그렇게 하면 작동하지 않을 것입니다
대신 이곳에 JSX 코드를 저장하려고 합니다
JSX 코드는 반환되지 않기 때문에
컴포넌트 코드 아무 곳에
일반 값으로 사용할 수 있습니다
변수 또는 상수에 저장할 수도 있습니다
그래서 이 문단을 선택하고
잘라서 제거하고
tabContent에 이 문단을 저장합니다
이제 여기서 if문을 실행하여
selectedTopic이 있는지 확인합니다
그런 경우라면 tabContent를 덮어씁니다
이제 실제 내용을 값으로
div를 저장하려고 합니다
이 div는 선택하여 지우고
조건이 맞는다면 div를 이곳에 저장합니다
이것으로 JSX 코드를 반환하기 전에
이 변수를 설정하는 것입니다
이제 이 변수를 가져와
하단에 메뉴 아래에 출력하게 할 수 있습니다
보시다시피 if문과 그런 변수를 사용하여
동일한 기능을 유지하면서
JSX 코드가 더 깔끔하게 정리됩니다
새로고침하면 전과 같은 동작이 보여집니다
이것으로 조건부로 내용을 렌더링하는
다양한 방법을 배웠습니다
선택하는 방법은 여러분의 선택에 달려있습니다