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

지난 글 까지는 목록 리스트 까지 만들어 봤다.

이제 목록 제목 옆 좋아요 아이콘과 좋아요가 1씩 증가하는 기능을 구현 할 것이다.

 

 

 

 

# 좋아요 아이콘과 카운트 넣기

App.js

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

좋아요는 변수로 사용할 것이고, 자주 변경하는 값이기 때문에 useState 를 이용한 변수로 쓸 것이다.

글제목 오른쪽에 하트 아이콘과 좋아요 카운트가 표시되는 코드를 추가 해준다.

 

▲ 결과!!

 

 

 

 

 

 

 

 

# 좋아요 증가 함수 만들기

좋아요를 1,2,3...n 이렇게 증가 시켜주려면, 좋아요 변수는 useState 를 사용 했으므로 좋아요 변경 기능도 useState 를 사용해야 한다.

 

하트 아이콘을 눌렀을 때 좋아요 카운트가 증가되게 하고 싶으므로, span 태그 안에 onClick 이벤트를 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  let [글제목,글제목변경1] = 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>
      {/* <span onClick={function() {console.log(1)}} //위와 같음
      <span onClick={() => {console.log(1)}} //위와 같음 */}
      <p>11월 16일 발행</p>
      <hr/>
     </div>
...생략
 
 
 cs

하트 아이콘 클릭 시 좋아요변경 이라는 함수를 호출하고, 좋아요가 1씩 증가하는 코드이다.

변수 사용 시 { } 안에 작성 해줘야 하므로, 변수 변경 함수 호출 시에도 { } 안에 작성 해준다.

 

▲ 결과!!

 

 

더보기

전체코드

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
/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  let [글제목,글제목변경1] = 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>
      {/* <span onClick={function() {console.log(1)}} //위와 같음
      <span onClick={() => {console.log(1)}} //위와 같음 */}
      <p>11월 16일 발행</p>
      <hr/>
     </div>
     <div className='list'>
      <h3>{글제목[1]}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
     <div className='list'>
      <h3>{글제목[2]}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
    </div>
  );
}
 
export default App;
 
 
 cs
저작자표시 (새창열림)

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

React : 컴포넌트 사용하기  (0) 2022.11.26
React : state 가 array/object 일 때 데이터 변경하기  (0) 2022.11.17
React : terminal > 경고메세지 안나오게 하는 방법  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #3 목록 만들기  (0) 2022.11.16
리액트 TODO 리스트 만들기 : #2 리액트에선 HTML 이 아닌 JSX 를 써야한다.  (0) 2022.11.16

# 변수 이용

App.css

1
2
3
4
5
6
7
8
...생략
.list{
  margin-top:30px;
  text-align:left;
  padding-left:20px;
  padding-right:20px;
}
...생략
 cs

 

 

 

 

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import logo from './logo.svg';
import './App.css';
 
function App() {
  let posts = '강남 고기 맛집';
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div>
     <div className='list'>
      <h3>{posts}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
    </div>
  );
}
 
export default App;
 
 
 cs

 

▲ 결과!!

 

 

 

 

 

 

 

 

 

# useState 를 이용

state

1. 변수 대신 쓰는 데이터 저장공간

2. useState() 를 이용해 만들어야함.

3. 문자, 숫자, array, object 다 저장가능

 

state 에 데이터 저장하는 이유 : 웹이 App 처럼 동작하도록 하게 하려고.

state 는 변경되면 HTML 이 자동으로 재렌더링이 됨.

그냥 변수는 변경되어도 자동 재렌더링이 안됨.

 

이게 무슨말이냐면, 변수 사용시 let a = '가' 이게 a = '나' 로 변경하면, 사이트를 새로고침해야 재반영 되는데

state를 사용하면 새로고침 하지 않고도 화면이 변경된다는 얘기다. 이게 Web-app 의 장점!!

자주 바뀌는, 중요한 데이터는 변수가 아닌 state 로 사용하면 좋다.

 

 

 

 

App.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
35
36
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
 
  let [글제목1,글제목변경1] = useState('가요 인기 순위'); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
  let [글제목2,글제목변경2] = useState('화장품 브랜드 순위'); 
  let [글제목3,글제목변경3] = useState('패딩 인기 순위');
 
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div>
     <div className='list'>
      <h3>{글제목1}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
     <div className='list'>
      <h3>{글제목2}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
     <div className='list'>
      <h3>{글제목3}</h3>
      <p>11월 16일 발행</p>
      <hr/>
     </div>
    </div>
  );
}
 
export default App;
 
 
 cs

 

 

▲ 결과!!

저작자표시 (새창열림)

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

React : state 가 array/object 일 때 데이터 변경하기  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기  (0) 2022.11.17
React : terminal > 경고메세지 안나오게 하는 방법  (0) 2022.11.17
리액트 TODO 리스트 만들기 : #2 리액트에선 HTML 이 아닌 JSX 를 써야한다.  (0) 2022.11.16
리액트 TODO 리스트 만들기 : #1 리액트 설치와 셋팅  (0) 2022.11.16

+ Recent posts

티스토리툴바