React 버튼 눌러 모달창 띄우기 , Map 사용

안녕하세요, 오늘은 Component문법을 사용하여 모달창을 만드는 방법을 알아가봅시다.

​

1. 모달창 만들기

1. 작성한 글 바로 밑에 <div>로 하나의 영역을 만들기

2. <div></div>안에 작성할 내용 넣기

3. App.css 디자인

근데, 이 모달을 한 번만 하진 않을텐데 계속 div를 만들면 헷갈리고 복잡하지 않을까?

그래서 리액트에서는 그 문제를 간편하게 만들 수 있는 방법,

HTML를 한 단어로 축약할 수 있는 Component문법을 방법을 사용한다.

내가 정하고 싶은 단어로 정해서 한 줄로 넣어놓을 수 있다.

아범은 Model이라고 했지만 명을 어떻게 지어도 무관하다는 것.

​

4. function APP의 return 부분 괄호까지 끝나는 부분쯤에 Component를 만든다.

이것이 컴포넌트 문법이다.

1. 함수를 만들고 함수 안에 내가 원하는 것 만들고

2. 위치를 정하여 <함수명></함수명>

주의 : return의 ()와 함수의 { } 가 끝났는지 확인해야한다.

5. 실행

Ctrl + Shift + ` 눌러 터미널을 만들고 npm start 를 입력해 실행.

주의할 점2

return() 안에있는 건 <div>이거 한번으로 묶어야한다.

즉, 함수 만들고 return()하여 ()안에 들어가는 태그는 딱 한번만 사용가능

따라서, 하나씩하나씩 만들어야한다는 것

​

🍖 Component의 장점은

Conponent를 만들면 한 묶음씩만든 것을 볼 수 있어 전보다 눈이 편하다는 것, 관리가 보다 쉬워진다는 것

​

2. 버튼 클릭 시 모달창 나타나게하기

버튼을 누를 시 모달창이 등장해야한다.

1. 버튼 만들기

2. 만약에 ~일 경우에 모달창 보이기식 코드작성(삼항연산자로)

3. 자바스크립트표현식으로 { } 안에

{ 조건식? 참일 때 실행코드작성 : 거짓일 때 실행코드작성} 이런 식으로

​

리액트에서 UI를 만들 때 데이터를 이용해서 만드는 방법을 사용한다.

데이터는 state에 보관하므로

​

let [] = useState(false); 참/ 거짓자료를 담고

let [모달, 모달변경] = userState(false); → 켰다끄는 코드만듬

useState()안에 false말고 true를 넣었다면 모달창은 페이지에 처음부터 그대로 나와있겠지.

​

아까 만든 { 조건식? 참일 때 실행코드작성 : 거짓일 때 실행코드작성} 이 코드에

{ 모달 === true ? <아범모달></아범모달> : null }

→ '모달'이 참이잖아 <아범모달></아범모달>참이니실행 : null 참이니깐노실행

→ { 모달=== true? <아범모달></아범모달> : null }

그 다음, <P>태그인 '루미큐브'부분을 누렀을 때 만든 모달이 보이게해야한다.

<p onClick={ ()⇒{}} >

내가 특정 state값을 변경하고 싶다. 변경함수를 사용하는 것이다 변경함수는?

state만들 때 같이 만들어놓은 모달변경을 사용하는 것이다.

모달이라는 state를 true라고 대체를 하는 것이다.

그럼 state가 true가 되어지고 클릭 시 그 <아범모달>이 나온다.

​

실행하면 버튼 클릭 시 모달창이 나오는 것을 확인할 수 있다.

​

3. 리액트에서 Map 사용하기 (반복문 사용하는 방법)

​

- 리액트에서 for 반복문

함수 하나 만들기,

return 으로 반복UI를 보여주는 것

특정 변수, 함수를 중간에 넣고싶을 때 중괄호를 열어 사용한다.

하지만 반복문 for 을 직접 넣을 수 없다. jsx중괄호 내에 for을 못 넣는다.

​

중괄호안에 반복문을 쓰는 법은? map()를 사용하는 것이다.

​

반복문 쓰는 법 {Map()}

예를들어 var 테스트 = [2,3,4]; 이거를 3씩 곱해주고 싶다면

​

보통 새론운 변수에 담아서 작성하며

var 뉴에러이 = 어레이.map(funciton(a){

return a * 2 });

​

이런식으로 작성한다.

​

{ 아범.map(function(){}); -> 아범으로 반복을 시킬 수 있다.

이괄호안에 콜백함수도 써도 괜찮지만 신문법으로 ()=>{ } 이것도 가능

​

let [아범, 아범게임변경] = useState(['루미큐브', '할리갈리', '탈무티']);

반복시킬 데이터의 갯수는 3개이니 3번 반복되게하려면

function(a) 넣고 데이터바인딩할 곳에 아범[1]을 a로 바꿔놓자.

변경데이터들을 각각 넣어주고 데이터바인딩을 함으로써 이름들이 각각 나오게되었다.

​

​

🍖 이렇게 모달창을 만들 때는 component 문법을 활용, 만들 때 주의할 점은

return() 안에있는 건 <div>이거 한번으로 묶을 수 밖에 없다는 것,

​

🍖 리액트에서 for을 사용할 순 있지만 JSX를 사용하고 있는 상태에서 중괄호 내에 for을 사용 할 순 없고

반복문으로 사용하는 것이 { Map(); }이라는 것.

​

리액트에서는 Map함수를 이렇게 사용하다니! 또한 Component 문법을 사용하니 복잡한 코드들을 더 편하게

볼 수 있게 만들어놓으니 시원시원~합니다.

​

그럼 다음 시간에는 이 각 component화했지만 다른 컴포넌트에서 다른 컴포넌트로, 즉 A컴포넌트안의 데이터를 B컴포넌트가 받아서 사용하고싶을 때에 어떤게 해야하는 지에 대해 알아보도록하겠습니다.

 

 

그리고 혹시 보고 계신 분들 중에 🎲보드게임🎲이나 프로젝트📂에 관심있으신 분들 계신가요?

사이드프로젝트팀과 보드게임 중고거래 플랫폼을 진행하고 있는데, 

기획부터 개발과정까지 오픈, IT관련 정보를 공유하자는 목적으로 팀과 함께

네이버 블로깅도 운영하고 있습니다.

 

관심있으신 분들이 있으시다면 살짝쿵 방문해주시면 감사하겠습니다. 

보드살롱 : 네이버 블로그

 

---

 

 

 

오늘도 봐주셔서 너무 감사합니다! 다음에도 열심히 정리해서 오도록할게요. 안녕🐣