컴포넌트 생성, 사용하기

컴포넌트

html은 <div> 사용이 많아지기 때문에 코드가 더러워지는 단점이 있다. 

리액트에서는 이 부분을 해결하기 위해 컴포넌트를 만들어 사용한다.

뿐만 아니라 해당 컴포넌트를 보면, 어떤 기능을 하는지 명확히 알 수 있는 장점도 있다.

→  가독성이 좋아지고, 코드의 재활용에 좋다.

1. 컴포넌트(component) 생성

1. function을 만들고,
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기 또는 <함수명/>

1) 주의사항

• 다른 function 바깥쪽에 작성할 것
• function 이름은 영문 대문자로 시작 (ex: Modal)
• return() 안에는 하나의 태그로 시작해 하나의 태그로 끝나야 함

→ 여러개의 태그를 사용하고 싶을 때는 가장 바깥쪽에 <></>로 감싸준다(fragment 문법)

→ 참고사이트 : https://ko.reactjs.org/docs/fragments.html

 

//App도 컴포넌트이다. 
function App() { 
  return (
    <Modal></Modal>
  )
}

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

 

 

2) 컴포넌트는 어디에 쓰면 좋은가

1. 반복적인 html 축약할 때
2. 큰 페이지들 (페이지 하나를 컴포넌트로 만들어 전환할 때 사용)
3. 자주 변경되는 것들

* 컴포넌트의 단점

컴포넌트는 함수이기 때문에 state를 가져다 쓸 때 문제가 생긴다.

→ 따라서 너무 코드가 너무 더럽거나, 자주 쓰는 것들을 만드려고 해라

 

⭐동적 UI 만들기

1. html, css로 미리 디자인 완성
2. UI 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

let [modal, setModal] = useState(상태표현);

//상태 표현의 형식은 자유
//0과 1, false와 true로 작성해도 괜찮다.
let [modal, setModal] = useState('닫힘');

 

1) 주의사항

• JSX 문법 안에서 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸기
• JSX 내에서 조건문 사용하고 싶을 때는 삼항 연산자를 사용한다.

function App() {   
  let [modal, setModal] = useState(false);
  
    return (
      <div className="App">
       {
          modal == true ? <Modal/> : null
       }
      </div>
  );
}

//modal 컴포넌트
function Modal() {
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div> 
  )
}

 

2) 버튼을 누르면 모달창이 나오게 만들기

function App() {   
  let [modal, setModal] = useState(false);
  
    return (
      <div className="App">
        <button onClick={ ()=> {
        modal == false ? setModal(true) : setModal(false)
        }}>모달버튼</button>
        
       {
          modal == true ? <Modal/> : null
       }
      </div>
  );
}

//modal 컴포넌트
function Modal() {
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div> 
  )
}

 

→ 리액트에서는 버튼 누르는 동작을 할 때 모달창의 스위치인 state만 건드린다.

반면, 자바스크립트에서는 버튼을 누르면 모달창의 html을 직접 건드린다는 점에서 다르다.

//이렇게 작성할 수도 있다.
//modal의 현재 상태의 반대로 바꾼다는 의미이므로!

<button onClick={ ()=> { setModal(!modal) }}>모달버튼</button>