기능적 구성 요소 반응
React 컴포넌트란?
웹 사이트 작동 방식을 분해하고 단순화하는 데 사용되는 빌딩 블록일 뿐입니다. 예를 들어 아래 이미지에서 Google 페이지가 Logo, WordBox, SearchButton 등과 같은 여러 부분으로 어떻게 분류되어 있는지 확인할 수 있습니다.
왜 그렇게 하고 싶어할까요?
구성 요소로 웹 사이트를 분해하면 코더가 실수를 식별하고 업데이트하기가 더 쉬워집니다. 구성 요소 사용의 주요 이점 중 하나는 구성 요소를 재사용하여 시간을 절약할 수 있다는 것입니다. 이는 구성 요소를 사용하는 몇 가지 이유일 뿐이지만 자세한 내용을 보려면 here을 클릭하십시오.
기능성 부품
기능적 구성요소는 대문자로 시작해야 하는 자바스크립트 기능입니다. 일반적으로 소품이라고도 하는 속성을 전달합니다. 소품에 대해 자세히 알아보려면 here 을 클릭하는 것이 좋습니다. 기능적 구성 요소가 어떻게 보이는지에 대한 예:
function WordBox(){
return <div>Hi!</div>;
}
기능적 구성 요소를 작성하는 또 다른 방법은 다음과 같습니다.
const WordBox = () => <div>Hi!</div>;
항상 최상위 구성 요소가 있으며 대부분 앱이라는 구성 요소입니다. 모든 구성 요소와 함께 다른 구성 요소도 호출할 수 있습니다. 예를 들어,
function App(){
return (
<div>
<WordBox/>
<Logo/>
</div>
);
}
위의 예제에서 사용한 컴포넌트 WordBox와 위의 그림에서 컴포넌트로 Logo를 호출하는 것을 볼 수 있습니다.
렌더링 구성요소
구성 요소를 표시하려면 ReactDOM.render() 메서드를 사용하여 렌더링해야 합니다. 대부분의 경우 ReactDOM.render()가 사용되는 index.js라는 파일이 있습니다. 하지만 파일 이름을 그렇게 부를 필요는 없습니다. 메서드는 최상위 구성 요소를 첫 번째 인수로 전달한 다음 두 번째 인수로 전달합니다
document.getElementById("root")
. 예를 들어,ReactDOM.render(<App />, document.getElementById("root"));
여기에서 최상위 구성 요소인 구성 요소 App이 호출되는 것을 볼 수 있습니다.
document.getElementById("root")
를 사용하면 루트 ID로 생성해야 하는 HTML 파일의 요소를 가져옵니다. HTML 파일에 대해 자세히 알아보려면 here 을 클릭하십시오.이것이 여러분에게 명확성을 제공하고 행운을 빕니다!
사용된 출처:
- Picture image
- https://reactjs.org/docs/components-and-props.html
- https://www.geeksforgeeks.org/reactjs-components/
Reference
이 문제에 관하여(기능적 구성 요소 반응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/josephineluu/react-functional-components-46m4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)