Front-end/React

[React] 코딩애플 blog -3

hyebin Lee 2021. 12. 5. 21:10

오늘 배울 내용!? 모달창으로 상세페이지 띄우기

 

주의 할 점!🚨 리턴 ( 소괄호 ) 안에 div를 여러개 사용할 수 없다.

return 안에는 항상 하나의 html 태그가 시작하고 끝나야 한다. <div></div><div></div><div></div> → 이런 형태 불가능!

(큰 div 안에 넣으면 가능해짐!)

 

html이 많아지고 복잡해지면 보기 싫어진다. 이럴때 사용하는 리액트 문법은 html 태그를 간편하게, 한 단어로 줄여서 쓸 수 있는 문법은 컴포넌트 문법이다!

장점 ? 이해가 쉽고 깔끔하게 정리가 가능하다. 컴포넌트 안에 또다른 컴포넌트를 만들 수 있다. 즉 관리가 편하다.

아래처럼 복잡한 코드보단 위처럼 짧은 코드로 가능!

그렇다면 컴포넌트는 어떻게 만들까❓

function Modal(){ //이름 짓고
    return (
      <div></div> //원하는 html 담고
    )
  }
}

<Modal></Modal> // 이런식으로 사용 가능!
또는
<Modal /> //이런식도 가능

 

 

🚨컴포넌트를 만들때 주의 사항🚨

  1. 이름은 대문자로 시작하는 것이 좋다.
  2. return 소괄호 안에다가 html을 담으면 된다. 같은 태그를 나란히 쓸 수 없다. 태그 하나로 묶어야 한다.이때, div로 묶기 싫으면? 프래그먼트 문법 사용 가능 <> </> 이렇게 열고 닫기!
  3. 컴포넌트 만드는 위치는 function App과 나란히 만들면 된다. function App도 일종의 컴포넌트이다.
  4. 컴포넌트를 만드는 기준은? 첫번째는 반복적으로 출현하는 Html 덩어리들을 컴포넌트로 치환하면 된다. 두번째는 사이트에서 자주 바뀌는 UI들을 컴포넌트 화 하면 이것만 재 랜더링이 일어나게 할 수 있어 성능적인 이점이 있다. 세번째는 다른 페이지로 나누고 싶을때 컴포넌트를 사용한다.

 

컴포넌트의 단점 ❓

state를 사용할때 복잡해진다.

이유는 state는 function APP()에서 만들었기 때문에 변수의 범위가 다르기 때문이다. 모든 변수는 function 안에서 살고 죽는다.

따라서 모달이라는 컴포넌트에다가 데이터를 전해줘야한다.

이때 props문법을 사용해야 전달이 가능하다.

 

 

 

예제 1) 글제목을 클릭하면 모달창이 등장하도록 코드 작성!

hint? 리액트는 일종의 html이긴 하지만 자바스크립트 표현식이기때문에 if문 안에 집어넣을 수 있다.

하지만 그냥 사용할 순 없고 JSX 중간에 변수를 넣고 싶으면 {변수명} 이런 형태로 가능하다. 하지만 if문은 {중괄호}안에 쓸 수 없다. 하지만 if 대신 삼항연산자는 가능하다!

if 대신 삼항연산자❓

{
1 < 3 ? console.log("맞아요") : console.log("틀려요")
}

조건식 ? 참일 때 : 거짓일 때

{
1 < 3 ? <Modal /> : null
}

위 코드는 모달창을 보여주고 싶을때 컴포넌트를 넣으면 되고

보여주고 싶지 않을때는 null을 넣어준다.

이때, null을 넣어주는 것은 텅빈 html이라는 뜻이다.

그렇다면 modal을 언제 보여줄까❓

리액트에서는 ui를 만들때 데이터를 이용한다. ui의 상태를 저장할 수 있다.

✔️스위치 = 데이터 = state✔️

let [modal,changeModal] =useState(false); //on/off 할 수 있는 변수 생성

{
modal == true 
? <Modal /> 
: null
}

<h3
  onClick={() => {
  changeModal(true);
  }}
        >
{글제목[2]}
</h3>

 

 

예제 2) 버튼 눌렀을 때 열리고 한번 더 누르면 닫히는 모달창?

 

 

내가 짠 코드

<button
        onClick={() => {
          modal == false ? changeModal(true) : changeModal(false);
        }}
      >
        상세페이지 보기
      </button>
      {modal == true ? <Modal /> : modal == false}

답안

<button
        onClick={() => {
          changeModal(!modal);
        }}
      >
        상세페이지 보기
      </button>
      {modal == true ? <Modal /> : modal == null}

내가 짠 코드와 답안을 비교해본 결과 답안이 훨씬 더 직관적이고 간단했다.

!를 이용해야할 것 같다는 생각을 했지만 조금 더 고민하고 답안을 볼껄 후회가 되었다. 조금 더 직관적이고 간단한 알고리즘을 짜기위해 조금 더 노력해봐야겠다.

결론 : 코딩 연습을 많이 해보자!

 

 

<정리!>

  1. div 100개 쓰면서 HTML만들면 보기 싫으니까 원하는 div 덩어리를 깔끔하게 한 단어로 축약할 수 있게 도와주는 문법이 바로 Component 컴포넌트입니다. 컴포넌트화 시키면 HTML 깔끔해짐
  2. 그러려면 function 컴포넌트명() { return ( div덩어리 ) } 이렇게 하나 함수 작성해주시면 컴포넌트 제작 끝입니다.
  3. 그럼 이제 컴포넌트명 아무데나 갖다쓰시면 아까 축약했던 div덩어리 나옴
  4. 관리가 편해진다는 장점이 있지만 남발하면 나중에 오히려 불편함