Functional Component는 React 애플리케이션에서 컴포넌트를 생성하는 한 가지 방법입니다. React.js 기능적 구성 요소는 기능적이고 보다 간결한 방식으로 UI 구성 요소를 만드는 데 도움이 됩니다. 이번 글에서는 React의 함수형 컴포넌트, 함수형 컴포넌트를 호출하는 다양한 방법, 함수형 컴포넌트를 생성하는 방법에 대해 알아봅니다. 또한 기능적 구성 요소에서 후크를 사용하는 방법도 보여 드리겠습니다.
내용의 테이블
React의 기능적 구성요소:
ReactJS 기능적 구성 요소 React에서 작업하는 동안 접하게 될 보다 일반적인 구성 요소 중 일부입니다. 이는 단순히 JavaScript 함수입니다. JavaScript 함수를 작성하여 React에서 기능적 구성 요소를 만들 수 있습니다. 이러한 함수는 데이터를 매개변수로 받을 수도 있고 받지 않을 수도 있습니다. 기능적 구성 요소에서 반환 값은 DOM 트리에 렌더링할 JSX 코드입니다.
기능적 구성요소를 호출하는 방법:
다음과 같이 다른 방법으로 JavaScript에서 함수를 호출할 수 있습니다.
1. 함수 이름 뒤에 괄호를 입력하여 함수를 호출합니다.
// Example of Calling the function with function name followed by Parentheses function Parentheses() { return (; }; const PropsExample = () =>{ // const [change, setChange] = useState(true); const [change, setChange] = useState(false); return ( setChange(!change)}> 여기를 클릭하세요! {change ? ( 'techcodeview.com에 오신 것을 환영합니다' /> ) : ( 'Geeks를 위한 컴퓨터 과학 포털' /> )} ); }; 기본 PropsExample 내보내기;애플리케이션 실행 단계: 터미널을 열고 다음 명령을 입력합니다. npm start 출력: 브라우저를 열면 프로젝트가 URL http://localhost:3000/에 표시됩니다.>