컴포넌트란

컴포넌트란

컴포넌트는 독립적인 소프트웨어 모듈으로 소스코드가 아닌 실행코드기반으로 재사용할 수 있도록 이미 구현이 완료되어 있어야만 한다.

 

리액트의 Component 문법

HTML을 나만의 단어로 치환해서 쓸수 있는 방법  => HTML을 미리 만들어 중복으로 사용할 수 있어 관리가 용이하다. 

① 반복출현하는 HTML UI

② 자주 변경되는 HTML UI

③ 메인과 다른 페이지를 만들어 구성할 때

 

단점  : state 쓸때 복잡하다. => 상위 component함수가 하위 component함수에 스테이트를 props 문법을 사용하여 보내야됨

 

 사용법

1) 한 단어의 함수를 만들고 안에 축약을 원하는 HTML을 작성한다.

ex)

        function Modal() {

            return (

                <div className="modal">

                <h2>제목</h2>

                <p>날짜</p>

                <p>상세내용</p>

                </div>

            )       

        }

 

2) 함수와 똑같은 단어를 태그로 작성하면 HTML이 들어간다.

ex)

<Modal />

 

※ 유의사항

1. 이름은 대문자로 시작해야된다. => 소문자는 렌더링 안됨

2. return() 안에 있는건 태그하나로 묶어라 => HTML 전체를 <div></div>나 <></>로 크게 묶어야됨

3. 컴포넌트는 메인 function 과 나란히 만들라는데 왜 안될까? 

SyntaxError: C:\Users\user\git\tagon\client\src\components\body\Login.js: Identifier 'Modal' has already been declared. (74:13) => 에러 알아보기