Component

Component 작성

function App(){
    return (
        <div>
            <Modal></Modal>
            <Modal/>
        </div>
    )
}

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

• React에서는 긴 html을 별도 function으로 정의하여 태그화할 수 있는데, 이를 Component라고 한다(Component는 대문자로 시작하는 게 일반적)
  - (참고) function App(){} 도 하나의 Component로 Index.js 에서 으로 사용하고 있음을 알 수 있다
• or 두 가지 다 사용 가능하다
• Component 사용 시 장점
  - 반복 되는 html 구조를 Component화 하여 효율을 높일 수 있다
  - 내용이 자주 변경 되는 html 구조를 Component화 하면 유지 보수가 편해진다
  - 페이지 별로 Component화 하면 통합 시 유용하다
  - 다른 팀원과 협업할 때 Component 단위로 작업할 수 있다
  

const Modal = () => {
    return ( <div></div> )
}

• 변수를 선언해 함수를 저장하여 사용해도 Component로 사용할 수 있다
• const 를 사용하여 변수 선언 시 실수로 값을 변경하는 것을 막을 수 있어 유용하다

Component 동적 UI

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

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

• Modal Component를 버튼 클릭 시에만 보이는 동적 UI 구현을 위해서는 state와 조건식을 이용할 수 있다
  - JS에서는 html class를 변경하는 방식으로 동적 UI를 구현했다면, react에서는 상태 변수를 이용해 html 렌더링을 조작하는 방식이다
• modal state를 만들어 동적 상태를 저장해놓고(true = visible, false = invisible 등), modal == true 일 경우에만 component를 출력해주면 된다
• 다만 JSX 안에서 {} 안에 JS 문법을 사용할 때 if, for 등 문장(statement)를 사용할 수 없고, 식(expression)의 형태인 삼항연산자(Condition oprator)를 사용할 수 있다
  - (참고) JS 문장을 사용하고 싶을 땐 JSX 영역이 아닌 function App(){} 바깥에서 사용하면 된다
  

문(statement)과 식(expression)의 차이 - 식은 값을 만들어 내며 다른 식의 하위 요소로 계산에 참여할 수 있는 반면 문은 자신을 둘러싸고 있는 가장 안쪽 블록의 최상위 요소로 존재하며 아무런 값을 만들어 내지 않는다는 차이가 있다

state toggle

modal === true ? setModal(false) : setModal(true);
setModal(!modal);

• 동적 UI 구현 시 state toggle 을 이용할 때 삼항연산자를 이용해 조건을 붙일 수 있지만, 더 간단하게는 !modal 을 이용해 true > false, false > true로 변경해줄 수 있다