[코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (2/6)

지난번 (1/2)편을 마치고 이번엔 (2/2)과정을 작성하였습니다.

[코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (1/2)

 

1. 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)

동적인 UI 만드는 3단계

1. html css로 미리 디자인 완성

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

3. state에 따라 UI가 어떻게 보일지 작성

App.js

App.css

이것이 1번 css로 미리 디자인을 완성시켰습니다.

 

두번째로 UI의 현재 상태를 state로 저장합니다.

이런식으로 처음에 모달이 false로 안나왔다가 클릭하면  true로 나오게 설정할 것이기때문에 false로 저장

 

세번째로 state에 따라 UI 가 어떻게 보일지 작성하고 state가 true면 보여지게 만들어보자.

이런식으로 삼항연산자를 사용하여 true일때는 Modal컴포넌트가 보여지고 false일때는 보여지지 않게 하고 싶다.

이런식으로 글제목[2]를 클릭하면 모달창이 보이게 설정했다.

 

일반 js였으면 버튼 누르면 모달창 html을 직접 건드렸지만 리액트에서는 버튼을 누르면 모달창 스위치(state)만 건드린다. 

 

2. map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때

이런식으로 map을 쓰면 map안에 있는 요소만큼 반복한다는 얘기이다. 실행하면

밑과 같이 1이 3번 출력되는걸 볼 수 있다.

이런식으로 파라미터를 a로 설정하면 함수의 파라미터는 array 안에 있던 자료이다. return에 뭐 적으면 array로 담아준다.

만약 console을 해보면

이렇게 나타난다.

 

html안에서는 for 반복문을 사용할 수 없으므로 map 함수를 사용한다.

이렇게 map 함수를 만들고 div태그를 출력하면 

이런식으로 나오게 된다. 하지만 [1,2,3] 처럼 하드 코딩 하는것이 아니라 실제 블로그 글 갯수만큼 html을 생성하고 싶다면 useState를 쓰면된다.

이런식으로 한다면

이렇게 나타나게 될 것이다. 그래서

이런식으로 작성하고

오른쪽에 파라미터를 하나 더 두면 0,1,2이런식으로 반복문을 돌 때마다 0부터 1씩 증가하는 정수가 된다. 그래서

이것도 가능하다. 그리고 반복문으로 html생성하면 key={html마다 다른숫자} 추가해야한다.

또한 모든 태그를 누를때마다 따봉버튼을 +1 시키려면

이런식으로 작성하면 된다.

 

3. 자식이 부모의 state 가져다쓰고 싶을 때는 props

부모와 자식

부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전송할 수 있다. 이러면 자식이 부모가 가지고 있던 state를 사용가능하다.

 

부모에서 자식으로 state를 전송하는 방법

1. <자식컴포넌트 작명={state이름}>

2. props 파라미터 등록 후 props.작명 사용

*props 전송은 부모-> 자식만 가능하다. 또한 자식과 자식(동률) 끼리 전송은 불가능하다. (패륜, 불륜전송 금지)

그렇다면  글수정 버튼(수정버튼 누르면 글 제목이 여자 코트 추천으로)을 만들어 보자

 

이런식으로 함수도 props로 자식에 내려서 사용할 수 있다.

 

4. props를 응용한 상세페이지 만들기

그렇다면 여자코트 추천을 누르면 글제목에 1번글이 강남 우동맛집을 누르면 모달에 강남 우동맛집 글이 나오게 만들어보자.

이것은 동적인 UI만들기 그대로 시행하면 된다.

 

이런식으로 부모 컴포넌트에서 자식으로 props 할 수 있지만 자식에서만 필요하면 자식 컴포넌트에서 만들어서 밑에처럼 쓰고

state가 Modal, App에서 필요하면 App 즉, 상위 컴포넌트에서 만들어서 써야함.

 

5. input 1 : 사용자가 입력한 글 다루기

<input> 태그로 안에 입력할 수 있는 칸을 만들 수 있다. type은 range, text, checkbox,date 등등이 있다.

<select> 태그를 통해 드롭박스를 만들 수도 있고, <textarea> 태그도 있다.

 

input 태그 안에 onChange(무언가 입력시 코드를 실행하고 싶을때) 를 쓸수도 있다.

이런식으로 값을 입력할때마다 변경이 되는것이 onChange

onMouseOver도 가능 이런것들을 이벤트 핸들러라고 말함. 30가지 정도가 있습니다.

 

 

<input>에 입력한 값을 가져오는 방법은 e라는 파라미터를 두어서 가져올수 있습니다. 보통은 e라고 둠(event 객체) 

그래서 e에 e.target.value 처럼 입력하면 input에 입력한 값을 가져올 수 있습니다. e.target으로 하면 이벤트가 발생한 html 태그로 갑니다.

*여기서 버그가 있는데 span 태그를 눌러도 모달창이 뜬다. 그 이유는 클릭이벤트는 상위 html로 퍼지기 때문에(이벤트버블링) 만약 이 상위 html로 퍼지는 이벤트버블링을 막고싶으면 e.stopPropagation()을 사용하자.

여기서 input 에 입력한 값을 저장하려면 이렇게 useState를 하나 만들어두고

이렇게 입력을 해주면 입력값에 저 값들이 들어가게 된다. 하지만 console.log 밑처럼

하게 될 경우 한박자 느리게 나오는데 그 이유는 state변경함수는 늦게 처리됨(전문 용어로 비동기처리) 그렇기 때문에 e.target.value 가 완료되기도 전에 다음줄을 실행해줌

 

6. input 다루기 2 : 블로그 글발행 기능 만들기

글 발행 버튼 만들기

input 태그에 입력값을 작성하고 글 발행 버튼을 누르면 제일 상단에 나오게 만들어보자.

unshift를 이용하여 글제목에 이는 것을 복사한뒤 입력값변경으로 넣었던 input값들을 unshift를 통해 값을 넣고 그것을 글 제목 변경에 넣으면 됩니다.

 

글 삭제 버튼 만들기

글 삭제 버튼을 만들었을때 누르면 해당 글이 삭제되게 만들어보자.

이렇게 버튼을 만들고 글제목을 복사하여 넣고 splice를 통해 i번째 인덱스에 해당하는 글을 삭제하고, 그것을 글제목변경에 넣으면 됩니다.

 

7. class를 이용한 옛날 React 문법

예전에는 class를 통해 이런식으로 작성할 수 있었지만 요즘은 잘 사용하지 않습니다.

 

class컴포넌트에서 state를 만들어보자

this.state를 통해 만들 수 있다.

class컴포넌트에서 state를 수정해보자

setState를 통해 바꿀 수 있다.

여기서 setState는 기존 state를 갈아치워주는것이 아닌 차이점만 분석해서 그 부분만 갈아끼워준다.

class컴포넌트에서 props를 해보자