여기까지
리액트의 핵심 내용이었습니다
이 섹션을 통해 리액트에서 멋지고
상호작용적인 데모 웹 애플리케이션을 만들었습니다
만드는 동안
데모 웹사이트에서 설명하는 것과
같은 핵심 개념을 배웠습니다
리액트의 모든 것은 컴포넌트라는 것을 배웠고
그러한 컴포넌트를 만들고
사용하는 방법을 배우고
컴포넌트는 결국
대문자로 시작하는
함수이고 리액트가 렌더링할 수 있는
값을 반환해야 한다는 것을 배웠습니다
이 값은 보통 JSX 코드로 반환됩니다
이 컴포넌트 함수를
JSX 코드 내 커스텀 HTML 요소처럼
사용할 수 있는 것도 배웠습니다
속성으로 컴포넌트를 설정할 수 있는 것도 배웠습니다
여기보이는 isSelected 속성이 그 예시입니다
원하는 모든 속성을 설정하거나
전체 객체를 키 값 쌍으로 펼쳐서
컴포넌트의 속성으로 사용할 수 있으며
컴포넌트 내부에서
이 속성을 컴포넌트 함수의
첫 번째 매개변수로 사용할 수 있습니다
이런 다양한 속성을 갖고 싶으면
객체 구조 분해를 사용할 수 있습니다
대안으로 속성을 사용하고 그 후 props.image나
props.title 등을 쓸 수 있습니다
이것은 당연히 시작일 뿐이었습니다
중괄호를 사용해
동적인 내용을 출력하는 방식도 배웠습니다
내용은 태그 사이에 출력하거나
속성값으로 출력할 수 있습니다
리액트에서 만들어지고 제공된
특별한 children 속성도 배웠으며
이는 컴포넌트의 시작과 끝 태그 사이에
통과되는 내용을
접근할 수 있게 해준다는 것을 배웠습니다
즉, 여기 태그 사이의 내용은 특별한 children 속성에
의해 컴포넌트 내부에 받아들일 수 있는 것입니다
배웠다시피 컴포넌트, 속성, JSX 코드는
매우 중요한 기능입니다
그러나 이와 같은 기능만으로
상호작용 가능한 웹사이트를 만들 수 없습니다
그러기 위해서는 이벤트를 청취해야 하는데
특별한 on 속성을 사용하여 가능하게 할 수 있습니다
또한 event handler를 등록해야 하는 실질적 요소가
함수를 받아들이고 함수를 전달할 수 있도록
여러분 개인의 컴포넌트에
각자의 on 속성을 추가하는 방법을 배웠습니다
예시로 TabButton에 onSelect 속성이 있는데
내장 버튼 안에서 onClick 속성의
값으로 사용됩니다
TabButton 안에 있는 버튼이 눌러지면
실행되어야 하는 함수를
가리키는 onSelect 속성을 사용할 수 있습니다
물론 이것만으로도 부족합니다
UI를 업데이트하고 싶다면 상태, 정확히 말하자면
특별한 useState Hook을 사용해야 한다는 것을 배웠습니다
이 Hook을 사용해 리액트에서 관리하는 데이터를 등록하고
특별한 상태 업데이트 함수를 통해
데이터를 업데이트 할 수 있습니다
다시 말해 여기 있는 useState hook를 통해
데이터를 관리 및 업데이트할 수 있고
업데이트 되면 상태가 속해있는
컴포넌트 함수가 다시 실행되도록 하여
JSX 코드가 재평가되어
필요에 따라 UI가 업데이트 됩니다
다시 말해 리액트가 예전 JSX 코드와
새로운 JSX 코드를 보고
탭 내용 변화와 같은
차이점을 찾는다면
이는 출력 될 데이터가 변했다는 의미여서
새로운 상태에 맞춰
실제 UI가 업데이트 됩니다
또,이 섹션에서 조건적으로 내용을
출력하는 다양한 방법을 배웠습니다
예시로 변수와 if문을 사용하는 것이 있으며
이와 같은 변수를 JSX 코드에
동적인 내용으로서 출력할 수 있습니다
조건 연산자와
논리적 AND 연산자를 단축키로
사용하는 것과 같은 다른 방법도 배웠습니다
마지막으로
내장 .map 메소드를 사용해
데이터 배열을 매핑하여 JSK 요소 배열로 만들어
목록 데이터를 동적으로 출력하는 방법을 배웠습니다
여기서 명심할 것은
리액트가 목록을 효율적으로
렌더링 및 업데이트 할 수 있도록
여기에 유사한 키 속성을 추가해야 한다는 것입니다
이것으로 리액트에 대한 핵심 개념 기초가 탄탄해졌습니다
구축할 수 있는 모든 리액트 앱에서
필수인 사항입니다
여러분은 이제부터 기본 리액트 앱을
만들 준비가 되었습니다
이후에는 핵심 내용을 넘어
보다 깊게 배울 것이고
리액트 상급 기능도 배울 예정입니다
다음 수업에서
이런 내용을 배워보겠습니다