리액트 공부하기 - 조건부 렌더링

 

한 번 또 힘내보자 !

---

 

1. HTML 구조나 디자인을 바꿀 수 없을까?

2. 조건부 렌더링 확실히 이해할 예제

3. 실습으로 이해 해보자 

   3-1 조건문(if문)으로 조건부 렌더링 실습

   3-2 삼항연산자로 조건부 렌더링 실습

---

 

렌더링이 될 때, 내용이 새로 업데이트 되면 내용만 바뀌는건데.. 그렇다면 틀은 똑같지 않나 ?

🐰HTML 구조나 디자인을 바꿀 수는 없을까 ?

디자인을 바꿀 땐, className 속성을 적용하면, css에서 적용할 수 있다.

 

그럴 때 사용하는 기술이 "조건부 렌더링" 이다

 

특정 조건이나 상태에 따라서 다른 컴포넌트나 요소를 렌더링 하는 것.

보통 조건문이나 논리 연산자를 활용한다 !

 

잠깐 궁금한 부분을 해결 한 뒤, 실습으로 개념을 이해해보자.

---

 

나의 고민.. 그냥 상태 함수 써서 다르게 보이면 되는거 아니야 ?

 

맞아 ! 이게 조건부 렌더링의 핵심이자 출발점이야 !

리액트에서는  리액트에서는 보통 useState 같은 훅을 써서 상태를 만들고, 그 상태 값에 따라 조건부 렌더링을 하는 구조야:

 

👉  조건부 렌더링이란 건 본질적으로
"상태(state)나 props 값 같은 조건에 따라 컴포넌트의 HTML 구조나 내용(UI)을 다르게 보여주는 것" 이야.

---

🐰이걸 보면 조건부 렌더링이 완전 이해될 예제 : 

const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
  {isLoggedIn ? <Welcome /> : <LoginForm />}
)

- isLoggedIn이라는 상태가 기준이 되고,

- 그 값이 바뀌면 (예: 로그인 성공 시 true로 바뀜)

 

- 보여주는 컴포넌트나 HTML 구조 자체가 바뀌는 것

---

🐰 실습으로 이해해보자.

 

먼저 버튼을 누르면 기분이 바뀌는 파트를 만들었어요

 

이 때, 이 내용을 그대로 갖다가 happy, sad, normal 이런식으로 넣는게 아니고

뭔가.. "내용에 따라 화면에 다양하게 표시를 해보고 싶어 !" 라는 생각으로 

 

이것을 조건부 렌더링으로 표현 해보기 위해서

[상태에 따른 얼굴을 표현할, face 컴포넌트] 부분을 만들어보겠습니다.

 

조건부 렌더링을 표현 할 때, 연산자나 또는 조건문을 활용한다고 했죠 ?

 

❶우선, 조건문을 활용하여 조건부 렌더링을 해봅시다.

 

첫번째 방법은 if문을 사용해서 만들어 봅니다.

face라는 컴포넌트를 렌더링할 때, 기분을 받아와서 이거에 따른 조건문을 짜주기 위하여

이렇게 만들어 줍니다.

 

 

리턴문이 총 3개가 있는 구조 입니다. 

 

 

❷ 두번째 방법으로 가장 많이 쓰이는 삼항 연산자로 조건부 렌더링 해봅시다.

 

리턴문 하나 안에서 내가 무엇을 랜더링 할건지 구분 할 수 있습니다.

 

 

❷ 두번째 방법으로 가장 많이 쓰이는 삼항 연산자로 조건부 렌더링 해봅시다.

앞에가 true이면, 뒤에 있는 요소도 같이 표시 되는 것.

---

 

className으로 클래스 값을 준다면, css에서도 이렇게 적용할 수 있는 것 참고 :)

클래스 네임을 줄 때도, 이렇게 삼항 연산자를 사용하여 각각 클래스를 줄 수 있다.

 

---

출처 : 오즈코딩스쿨 학습자료, 구글링, 챗지피티