코딩 애플 2022 리액트 복습용 정리(2) 컴포넌트, 동적UI(모달창), map(), props

 

 

 

많은 div들을 한 단어로 줄이고 싶다면? → Component를 사용!

Component를 사용하면 더 명시적인 코드를 작성할 수 있기 때문에 관리가 쉬워진다. 

 

 

 

컴포넌트 만드는 법

 

1. function 만들고,

 

    ※ 다른 function 바깥에 만들어야 함!

        즉, function App() {} 밖에 만들라는 소리임.

 

    그리고 함수 작명을 할 때는 영어 대문자로 시작하는 것이 룰임.

 

2. return() 안에 html 담기

 

3. <함수명></함수명> 쓰기

 

 

(참고) return() 안에 html 병렬 기입하려면?

          <> </> 이런 식으로 묶어주면 됨. (fragment 문법)

 

(참고) 컴포넌트를 갖다 쓸 때, <함수명> </함수명> 이렇게 써도 되지만 <함수명/> 이렇게 바로 써도 됨.

 

 

 

그럼 어떤 걸 컴포넌트로 만들면 좋을까?

 

1. 반복적인 html 축약할 때

2. 큰 페이지들

3. 자주 변경되는 것들

 

 

 

컴포넌트의 단점

 

state 가져다 쓸 때 문제가 생긴다. 

 

 

 

---

 

 

 

[ 동적인 UI 만드는 step ]

 

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

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

3. state에 따라 UI가 어떻게 보일지 작성 (조건문 등으로)

    → if 문은 중괄호 안에 쓸 수 없기 때문에 삼항 연산자를 사용한다.

 

(참고) 삼항 연산자

조건식 ? 조건식이 참일 때 실행할 코드 : 거짓일 때 실행할 코드

 

 

//App.js

import './App.css';
import { useState } from 'react';

function App() {

    let [글제목들, 글제목변경함수] = useState(['나', '다', '가']);
    let[modal, setModal] = useState(false); // 2. UI의 현재 상태를 state로 저장

    return (
    	<div className="App">
        	<div className='list'>
        		<h4 onClick={() => {setModal(!modal)}}> {글제목들[2]} </h4> // 숙제 부분
        		<p>1월 28일 발행</p>
     		</div>
		{ modal === true ? <Modal/> : null } // 3. state에 따라 UI가 어떻게 보일지 작성
        </div>
    );
}

function Modal() {  // 1. html css로 미리 디자인 완성
  return(
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

export default App;

 

 

 

---

 

 

 

map()

 

→ 모든 Array 자료 뒤에다가 붙일 수 있다.

 

1. 왼쪽 array 자료 개수만큼 함수 안의 코드 실행해 줌

2. 함수의 파라미터는 array 안에 있던 자료임 (유용한 파라미터 2개 사용 가능)

3. return에 뭐 적으면 array로 담아줌

 

 

 

같은 html 반복 생성하는 법

 

중괄호 안에는 for 문을 쓸 수 없기 때문에 map을 사용한다. 

 

(참고) map 반복문으로 반복생성한 html엔 key={html마다 다른 숫자} 이런 속성을 추가해야 함.

          그래야 리액트가 <div>들을 각각 구분할 수 있음. 없으면 워닝 뜸.

 

<div className="list" key={i}>

 

 

{
    글제목들.map(function(a){ //(a, i)이렇게 쓰면, 
                              //i는 반복문을 돌 때마다 0부터 1씩 증가하는 정수임.
        return (
            <div className='list'>
                <h4>{a}</h4>  //{글제목들[i]} 해도 됨
                <p>2월 17일 발행</p>
            </div>
        )
    })
}

 

 

//숙제 - 좋아요 개수 각각 증가하게 만들기

let [좋아요, 좋아요변경함수] = useState([0, 0, 0]);


{
    글제목들.map(function(a, i){
        return (
            <div className='list'>
                <h4 onClick={() => {setModal(!modal)}}> {a}

                    <span onClick={()=>{ 
                        let 카피본 = [...좋아요];
                        카피본[i] = 카피본[i] + 1
                        좋아요변경함수(카피본)
                    }}>👍</span> {좋아요[i]} 
                
                </h4>
                <p>2월 17일 발행</p>
            </div>
        )
    })
}

 

 

 

---

 

 

 

부모 → 자식 state 전송하는 법 : props 문법

 

 

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

 

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

 

 

 

 

 

( + ) 다양한 색의 모달창이 필요하다면?

이렇게 쓰면 컴포넌트의 재사용성을 높일 수 있다.

 

(참고) 파라미터 문법은 다양한 기능을 하는 함수를 만들 때 사용함.

 

 

 

숙제 - props를 이용해서 제목 수정 버튼 만들기

 

 

 

각 모달창마다 알맞은 제목 띄우기

→ 이 상황에선 title state를 그냥 자식 컴포넌트인 Modal function에 만들면 props가 필요 없음.

     그런데 해당 state가 Modal과 App에서 다 필요하다면, state를 사용하는 최상위 컴포넌트인 App에 만들어놔야 함.