React - 동적인 UI 만들기

⭐[동적인 UI 만드는 3STEP!]⭐
- HTML CSS로 미리 디자인을 완성하기
- UI의 현재 상태를 state로 저장해놓기
- state에 따라 UI가 어떻게 보일지 조건문(삼항연산자)으로 작성하기

❔삼항연산자가 뭘까❔

{조건 ? 참일 때 실행될 코드 : 거짓일 때 실행될 코드}
{1 == 1 ? "맞음" : "틀림"}

1. HTML과CSS로 미리 디자인 해놓기

function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button
        onClick={() => {
          let 복사본 = [...props.글제목];
          복사본[0] = "여자 코트 추천";
          props.글제목변경(복사본);
        }}
      >
        제목수정
      </button>
    </div>
  );
}

2.UI의 현재 상태를 state로 저장해놓기

let [modal, setModal] = useState(false); 
// modal은 useState의 데이터를 가리키고, setModal은 useState 변경을 도와주는 변경함수이다. 
// modal의 초기상태는 브라우저에서 보이지 않고 어떠한 작업을 했을때 보여주게하는 기능을 만들려고 한다. 

3. state에 따라 UI가 어떻게 보일지 조건문(삼항연산자)으로 작성하기

버튼을 눌렀을 대 modal이 true이면 모달을 띄워주고 아니면 띄워주지 않기.

function App(){
let [modal, setModal] = useState(false);
return(
	<button onClick={()=>{{modal == true ? setModal(false) : setModal(true);}}}>모달오픈</button>
)}

< setModal(false) : setModal(true) 부분 설명 >

위에서 설명했듯이 setModal은 modal의 useState의 변경을 도와주는 변경함수라고 했다.

말 그대로 modal의 useState의 데이터를 변경시켜주고 싶다면 setModal()을 사용하고 괄호 안에는 변경해줄 값을 작성해주면 된다.

따라서 modal이 true 라면 modal의 useState 값을 false로 변경해주고, 그게 아니라면 true로 변경해달라는 뜻이다.

📌 혹시라도 "삼항연산자"가 떠오르지 않았다해도 걱정말자. 개발실력이 부족한게 아니라 "프로그래밍하는 법"을 배우지 않아서 그런 것 뿐이다. -코딩애플-

출처. 코딩애플