Blog.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function Blog() {
 
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4 onClick={() => { console.log('h4클릭') }}> 제목
        <span onClick={() => { console.log('span클릭') }}> 😆 </span>
      </h4>
    </div>
  );
}
 
export default Blog;
 
 
 cs

이런 식으로 h4 태그, span 태그 두개에 이벤트를 걸어 놓았다면, 아래와 같이 span 태그 안에 있는 내용 클릭 시 h4 클릭 이벤트도 함께 발생하게 된다. (이걸 이벤트 버블링이라 한다.)

 

 

아이콘 클릭 시 제목 클릭 이벤트도 같이 발생된다.

 

 

 

# span 에만 이벤트가 발생하게 하고 싶을 땐?

 

1
<span onClick={(e) => { e.stopPropagation(); console.log('span클릭') }}> 😆 </span>
 cs

 

span 태그에 (e) 를 넣어주고 e.stopPropagation(); 을 넣어주면 된다!!

 

▲ 결과!!

저작자표시 (새창열림)

'공부 > React' 카테고리의 다른 글

React : 동적 UI 만들기  (0) 2022.11.26
React : 컴포넌트 사용하기  (0) 2022.11.26
React : state 가 array/object 일 때 데이터 변경하기  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기  (0) 2022.11.17
React : terminal > 경고메세지 안나오게 하는 방법  (0) 2022.11.17

# 제목 눌렀을 때 Modal 창 띄우고 다시 눌렀을 때 Modal 창을 닫는 방법

 

여기서 제목 글자를 클릭했을 때 아래의 상세보기 창이 나오고 안나오고를 반복하고 싶을때는 state 를 사용 하면 된다.

 

 

 

 

 

 

Blog.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function Blog() {
  let [modal, setModal] = useState(false);
 
  return (
    <div className="App">
      <div className='list'>
        <h3>제목</h3>
        <p>11월 26일 발행</p>
      </div>
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  );
}
 
function Modal() {
  return (
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </>
  )
}
 
export default Blog;
 
 
 cs

modal 이라는 state 를 선언해주고, 초기 값을 false 로 두어 처음 로딩 시에는 Modal 창이 안보이게 해준다.

 

 

 

그리고 14~16 째 줄과 같이 { } 안에 삼항연산자로 modal 이 true 이면 Modal 컴포넌트를 보이게 하고, false 이면 null 을 주고 아무것도 보이지 않게 한다.

(react 에는 {} 안에 if 문 사용 불가)

1
2
3
4
<h3  onClick= {() => { 
          setModal(true);
          }}>
제목</h3>
 cs

 

h3 태그에 Click 이벤트를 줘서 modal 을 true 로 바꿔주면, Modal 창이 보이게 된다.

 

 

하지만 이렇게만 해주면 보이게만 하고 다시 사라지게 하는건 할 수 없는데 ,,,

 

 

 

 

 

 

# setModal(!modal)

1
2
3
4
5
<h3  onClick= {() => { 
          setModal(!modal);
          }}>
제목
</h3>
 cs

이렇게 해주면!!!!  Modal 이 사라졌다 나타났다 한다.

현재 modal 변수가 true 상태이면 false 로 바꿔주고, modal 변수가 false 상태이면 true 로 바꿔주는 코드이다.

(오...)

 

 

마치 스위치 ON/OFF 기능처럼 state 를 사용하는 것이다.

저작자표시 (새창열림)

'공부 > React' 카테고리의 다른 글

React : 상위 요소 클릭 안되게 하는 법  (0) 2022.11.27
React : 컴포넌트 사용하기  (0) 2022.11.26
React : state 가 array/object 일 때 데이터 변경하기  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기  (0) 2022.11.17
React : terminal > 경고메세지 안나오게 하는 방법  (0) 2022.11.17

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  return (
    <div className="App">
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </div>
  );
 
 cs

div className 이 modal 인 div 들이 여러개 정의되어야 한다고 하면 저 div 를 n 개만큼 복사 붙여넣기를 해야한다.

그러면 코드가 지저분 해진다.

 

 

 

 

# 컴포넌트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
       <Modal></Modal>
    </div>
  );
}
 
function Modal() {
  return (
    <>
      <div className="modal">
        <Modal></Modal>
      </div>
    </>
  )
}
 
 
const Modal = () => {
  return (
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </>
  )
}
export default App;
 
 
 cs

이럴때 사용하는 것이 "컴포넌트" 라는 것이다.

Modal 을 함수로 정의 해 놓고, html 태그 안에서 <함수명></함수명> 또는 <함수명/> 으로 사용 하면, 

Modal 안에 있는 html 태그들을 가져다 쓸 수 있다.

15~23번째 줄과 26~36번째 줄은 같은 의미이다.

 

 

 

 

 

 

 

컴포넌트 안에는 <div> ... </div> <div> ... </div> 가 선언될 수 없으므로 제일 바깥에 의미 없는 태그인 <></> 를 같이 써주도록 한다.

 

 

 

참고로 React 프로젝트를 처음 생성하면 <App /> 이 render 안에 적혀 있을텐데,

이건 App.js 의 App() 함수 안에 있는걸 표시해준다는 것이다.

 

 

 

# 컴포넌트로 만들면 좋은것

1. 반복적인 html

2. 큰 페이지

3. 자주 변경되는 것

저작자표시 (새창열림)

'공부 > React' 카테고리의 다른 글

React : 상위 요소 클릭 안되게 하는 법  (0) 2022.11.27
React : 동적 UI 만들기  (0) 2022.11.26
React : state 가 array/object 일 때 데이터 변경하기  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기  (0) 2022.11.17
React : terminal > 경고메세지 안나오게 하는 방법  (0) 2022.11.17

 

1
let [글제목,글제목변경] = useState(['가요 인기 순위', '화장품 브랜드 순위', '패딩 인기 순위']);
  

이런 데이터가 있다고 하면, 

글제목[0] = 가요 인기 순위

글제목[1] = 화장품 브랜드 순위

글제목[2] = 패딩 인기 순위 이다.

 

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  let [글제목,글제목변경] = useState(['가요 인기 순위', '화장품 브랜드 순위', '패딩 인기 순위']); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
  let [좋아요,좋아요변경] = useState(0);
 
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div> 
     <div className='list'> 
      <h3>{글제목[0]} <span onClick={ () => {좋아요변경(좋아요+1)}  }>💕</span> {좋아요} </h3>
...생략
 
  

React 에서는 state 를 이용하여 <h3>{글제목[0]}</h3> 이렇게 사용 하면, 

<h3>가요 인기 순위</h3> 이렇게 변경이 되는데,

버튼을 클릭했을 때 가요 인기 순위 글자를 트로트 인기 순위 글자로 변경 해야 할 땐 어떻게 해야 할까 ?

 

array, object 를 이용했을 땐 원본 데이터를 저장하는 것이 좋으므로, 독립적인 변수를 만들어서 기존 데이터를 넣어준다.

1
let copyValue = 글제목;
  

 

이렇게 말이다.

 

 

 

1
2
3
4
5
6
<button onClick={() => {
        let copy = 글제목;
        copy[0] = '트로트 인기 순위';
        글제목변경(copy)}
        }>글제목변경
</button>
  

버튼을 클릭했을 때 이렇게 하면 글제목의 0 번째 변수인 '가요 인기 순위' 가 '트로트 인기 순위'로 바뀔 것 같지만!!

 

아무리 눌러도 바뀌지 않는다;

 

 

 

 

 

 

 

 

글제목 -----> ['가요 인기 순위', '화장품 브랜드 순위', ...] 를 가지고 있는것 같지만

state 라는 글제목에는 [ ] 배열이 아닌 -----> 화살표에 대한 정보만 갖고 있다..!!!

 

#그렇다면?

1
2
3
4
5
6
<button onClick={() => {
        let copy = [...글제목];
        copy[0] = '트로트 인기 순위';
        글제목변경(copy)}
        }>글제목변경
</button>
  

 

앞에 [... 를 붙여서 새롭게 정의를 해줘야 한다.

새로운 메모리(?) 공간에 있는 변수를 참조하게 말이다.

 

그래서 [...글제목] 으로 새로 선언해주면~ 잘 된다.

▲ 결과!!

저작자표시 (새창열림)

'공부 > React' 카테고리의 다른 글

React : 동적 UI 만들기  (0) 2022.11.26
React : 컴포넌트 사용하기  (0) 2022.11.26
리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기  (0) 2022.11.17
React : terminal > 경고메세지 안나오게 하는 방법  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #3 목록 만들기  (0) 2022.11.16

+ Recent posts

티스토리툴바