[react web] useState로 내용 숨기고 보이기

0. 들어가면서

 useState를 활용해서 내용을 숨기고 보이는 방법에 대해 알아보자. 우선은 앞의 useState 기초를 확인하고 오자. 우리가 만들 것은 버튼 누를 시 특정 내용이 보이고, 다시 누르면 안보이게 하는 것이다.

 

기초 개념은 아래에서 참고하자.

[Web/React] - [react web] 시작 후 파일 정리

[Web/React] - [react web] Hook 기초_useState

[Web/React] - [react web] Hook 기초_useEffect

[Web/React] - [React Web] AWS EC2 배포 ALL-IN-ONE

 

[Web/React] - [react web] mocking 모킹 방법 (msw로 데이터 가져오기)

 

 

1. 코드

기본적인 component 생성과 사용법은 여기를 통해서 확인하면 된다. 아래는 ViewContent라는 jsx파일을 만들고 글을 적어준 것이다.

 

import React, {useState} from 'react';

const ViewContent = () => {
    const [hanpy, setHanpy] = useState(false);
    const handleView = () => {
        setHanpy(!hanpy)
    }
    return (
        <>
            <p>
                ViewContent 파일
            </p>
            <button onClick={handleView}>ViewControl</button>
            {(hanpy?
                <p>image나 text가 들어가 있다.</p>
            :
                <></>
            )}
        </>
    )
}

export default ViewContent;

 

코드 설명은 button을 누르면 handleview 함수가 실행되면서 p태그 내용이 보였다 안보였다 한다.

 

const [hanpy, setHanpy] = useState(false);

 useState를 활용해서 useState 변수를 지정했다. 초기값은 false이다

 

setHanpy(!hanpy)

 hanpy의 boolean 값을 !를 이용해서 반대로 변경하는 코드이다.

 

{(hanpy?

   <p>image나 text가 들어가 있다.</p>

:

    <></>

)}

위의 코드는 if문이라고 생각 해도 된다. hanpy가 true일 때는 p태그의 내용이 보이고, false일 때는 빈값이 보이게 만들었다. 

((조건) ? 조건이 참이면 보여진다 : 조건이 거짓이면 보여진다)

 

 

위의 방식을 사용하면, 내용을 접었다가 펴는 웹사이트를 만들 수 있다. 참 쉽다.