React - Component

Component(컴포넌트) 란?

• html 코드가 길어지면 가독성이 떨어지는 단점을 보완하기 위해 만들어진 기능입니다.
• 긴  html 코드를 태그 하나로 축약해서 사용할 수 있습니다.
• 컴포넌트 함수의 이름은 대문자로 시작하는 것이 규칙입니다. ( 대문자로 시작하는 함수는 컴포넌트라고 생각하면 됩니다.)

• 함수를 만드는 또 다른 방식

 

 

Component 를 언제 사용하는가?

• 반복적인 html 이 있을 때
• 큰 페이지들
• 자주변경되는 것들

 

Component 는 꼭 필요할 때만 사용합니다.

 

만약에 하나의 return 안에서 태그를 꼭 두개 사용해야하는 상황이 생긴다면?

• 그럴때는 의미없는 div 태그로 전체를 묶어주면 됩니다.

function Modal() {
    return (
        <div>
            <div className="modal">
                <h4>제목</h4>
                <p>날짜</p>
                <p>상세내용</p>
            </div>
            <div>

            </div>
        </div>
    );
}

• 이 의미없는 div 태그를 사용하기 싫다면 Fragment 를 사용하면 됩니다.

• Fragment 축약으로 사용하기

 

동적인 UI 만들기

• html, css 로 미리 디자인을 완성합니다.

• UI 의 현재 상태를 State 로 저장합니다.
  • state 값은 본인이 원하는 대로 사용합니다.

• State 에 따라서 UI 가 어떻게 보일지 작성합니다.(조건문 등)
  • ‘return ();’ 안에는 js 의 if, for 등을 사용할 수 없습니다.
  • 그 대신 삼항연산자는 사용이 가능합니다.

 

 

• css 의 className 은 모든 react 파일에 적용되는데 이걸 하나의 파일에만 적용해서 className 이 겹쳐도 css 충돌이 일어나지 않도록 하는 방법
  • 먼저 css 의 파일 이름을 적용시키고 싶은 파일의 이름.module.css 로 바꾸어줍니다.

• 그 다음에 해당 파일 안에서 className 을 적을 때 아래와 같이 적용시킵니다.

import styles from './App.module.css';

const App = () => {
	return (
    	<div className={styles.title}>
        	css 적용
        </div>
    );
};