[리액트] 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)
오늘은 모달창 기능을 어떻게 만드는지 알아봅시다.
"제 완벽한 코드 따라치세요 그럼 모달창 완성~~" 식으로 가르치면 저도 편하고 좋지만
그렇게 배우면 평생 모달창밖에 못만드는 것임
"동적인 UI 알아서 만드는 3-step" 을 알려드릴테니까 이거 가지고 알아서 혼자 코드짜십시오
리액트에서 동적인 UI 만드는 step
동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는
모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다.
1. html css로 미리 UI 디자인을 다 해놓고
2. UI의 현재 상태를 state로 저장해두고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
이렇게 코드짜면 완성입니다.
그래서 글제목 누르면 전에 만들었던 <Modal> 이게 뿅 등장하는
모달창 기능을 만들어봅시다.
step 1. html css로 미리 디자인해놓기
디자인은 저번시간에 다 만들어놔서 패스해도 될듯
step 2. UI의 현재 상태를 state로 저장
state 하나 만들고
거기에 현재 UI의 상태정보를 저장해두라는 소리입니다.
modal 창의 상태는 보이고, 안 보이고 !!
let [modal, setModal] = useState(false);저는 modal이라고 작명했습니다.
영어로 작명시 state변경함수는 set을 앞에 붙이는게 관습입니다.
state에 무슨 자료를 넣어야되냐면 정말 맘대로 하면 됩니다.
그냥 현재 모달창의 상태만 표현할 수 있으면 됩니다.
모달창은 열림/닫힘 이 두개 상태밖에 없기 때문에 그거 2종류만 표현할 수 있는 자료형이면 됩니다.
false/true or 0/1 ..
let [modal, setModal] = useState('닫힘');
let [modal, setModal] = useState(0);'닫힘'/'열림
0/1
아무렇게나 표현해도 상관없습니다. 저는 true/false로 표현해볼 것임
(true false는 참 거짓을 담을 수 있는 boolean이라는 자료형입니다)
step 3. state에 따라서 UI가 어떻게 보일지 작성(조건문 등으로)
function App (){
let [modal, setModal] = useState(false);
return (
저 state가 true면 <Modal></Modal>
false면 아무것도 보여주지마세요
)
}이렇게 코드짜라는 소리입니다.
프로그래밍할 때 "이 경우엔 이렇게 해주세요~" 라고 코드짜고 싶으면 if 조건문을 사용합니다.
JSX에서 조건문 쓰는 법
조건문은 if / else 문법을 쓰면 되는데
JSX 안에서는 if else 문법을 바로 사용할 수 없습니다.
써보십시오 글자색도 이상해질걸요
하지만 if 문법 대신 삼항연산자라는건 JSX 중괄호 안에서 사용가능합니다.
조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 이렇게 if문 대신 쓸 수 있는 문법이 삼항연산자입니다.
3 > 1 ? console.log('맞음') : console.log('아님') 예를 들어 이렇게 쓰면 3 > 1 이게 참이기 때문에 '맞음'이 출력됩니다.
그래서 아까 모달창으로 돌아가서
저 state가 true면 <Modal></Modal> 보여주고
false면 아무것도 보여주지마세요~
라고 코드짜고 싶으면 어떻게 할까요?
function App (){
let [modal, setModal] = useState(false);
return (
<div className="app">
(생략)
{
modal == true ? <Modal></Modal> : null
}
</div>
)
}이렇게 코드짜면 됩니다.
null은 그냥 아무 html도 남기기 싫을 때 쓰는 자료입니다. null은 텅 비었다는 뜻임
이제 3-step 끝입니다.
글제목 누르면 모달창을 띄우고 싶어요
지금은 모달창이 안보입니다.
왜냐면 state 기본값이 false였고, false일 경우엔 <Modal> 안보이게 코드짜놔서 그렇습니다.
그럼 이제 글제목을 클릭하면 모달창이 보이게 만들고 싶으면 어떻게 하죠?
어떻게 코드짜야합니까.
힌트는 여러분이
"글제목 누르면 모달 html을 보이게 해주세요" 라고 코드를 짜는게 아니라
"글제목 누르면 state를 조절해주세요" 라고 코드짜면 됩니다.
왜냐면 state 바뀌면 html은 알아서 자동으로 재렌더링됩니다.
그래서 리액트에서 UI만드는 과정을 비유하면
스위치와 전등만드는거랑 비슷하다고 보면 됩니다.
1. 일단 전등이쁘게 달아놓고(모달창 디자인하기)
2. 스위치랑 연결하고(현재 상태를 state로 저장하기)
3. 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록(삼항연산자로 모달창 onoff 만들기)
만들어놓는 겁니다.
그리고 나중에 필요하면 스위치 조작만 하면 되는 것임
스위치는 state, 전등은 <Modal>입니다.
그래서 예전 쌩자바스크립트로 UI 만드는 것과는 약간 방식이 다릅니다.
쌩자바스크립트는 귀찮게 html을 조작해야했는데
리액트환경에선 html을 직접 조작하지 않습니다.
그래서 예전 방식에 익숙한 사람이라면 정신개조를 좀 해야함
오늘의 숙제 :
글제목 한번 더 누르면 모달창이 닫혀야합니다.
어떻게 코드를 짜면 될까요?
글제목 클릭시
지금 state가 true면 setModal(false)
지금 state가 false면 setModal(true)
이런 코드를 실행하면 됩니다.
if 조건문이나 삼항연산자나 그런거 쓰면 될듯요
이걸 몰랐다면 리액트 잘하고 못하고의 문제가 아니라 프로그래밍하는 법을 안배워서 그럴 뿐입니다.
실은 리액트 문법보다 혼자서 알아서 프로그래밍하는 법 같은게 더 중요함
function App (){
let [modal, setModal] = useState(false);
return (
<div>
(생략)
<button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
{
modal == true ? <Modal></Modal> : null
}
</div>
)
}아니면 간단하게 setModal(!modal) 이래도 됩니다.
느낌표가 뭐냐면
느낌표 우측 자료를 반대로 바꿔줍니다.
!true는 출력해보면 false입니다.
!false는 출력해보면 true입니다.
그래서 저렇게 써도 가능할듯요