[react] 리액트 컴포넌트 및 map 함수(2주차)

https://zzuzzu-99.tistory.com/54

코딩애플님의 강의를 참고하였습니다. 문제시 댓글 달아주시면 비공개 처리하겠습니다.

 

1 . state 함수를 이용하여 버튼을 눌렀을 때 남자 셔츠 추천을 --> 여자 코트 추천으로 바꾸기

 

<button OnClick={}=>{
	글제목[0] = '여자코트 추천'
    글제목변경(글제목);
}}>글수정</butoon>

이 코드의 경우 array/object 다룰 때 원본을 훼손시키는 경우이기 때문에 좋은 코드는 아니다.

 

 

<button OnClick={}=>{
	let copy = [...글제목];
    copy[0] = '여자 코트추천;
    글제목변경(copy);
}}>글수정</butoon>

 

state변경 함수 특징

• 기존 state와 신규 state가 같을 경우 변경을 해주지 않는다.

 

* [array/object 특징]

array/object 담은 변수엔 화살표만 저장됨  *

 

let copy = [...글제목]; 은 완전한 독립적인 사본이 생긴다.

따라서 새로운 state라고 생각하고 수정이 되는 것이다.

 

 

state가 array/object면 독립적 카피본을 만들어서 수정해야 한다.

 

 

비슷한 예시로 이번엔 가나다 순으로 제목을 나열하는 버튼을 만들어보겠다.

<button onClick={ ()=> {
        let copy_sort = [...글제목].sort() ;
        글제목변경(copy_sort);
      }}>가나다순 정렬</button>

array 나 object면 독립적 카피본 하나를 만들어서 수정해야 하기 때문에

copy_sort 변수를 만들어주었고 [...글제목].sort()를 해주어서 state를 변경해주는 버튼을 만들었다.

 

클릭하면 남자 가디건 추천이 남자 셔츠 보다 먼저 정렬 되는 것을 볼 수 있다.

 

 

2. 제목 클릭 시 상세내용 보기

 

<div className= 'modal1'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>

css

.modal{
  margin-top : 20px;
  padding : 20px;
  background: white;
  text-align: left;
}

근데 html 코드 짤 때 되게 길게 짜거나 복잡한데 긴 html을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.

이것을 Component라고 한다.

 

컴포넌트 만드는법

• function 만들고
• return() 안에 html 담고
• <함수명></함수명> 쓰기   == </함수명>

function Modal(){
  return(
    <div className= 'modal1'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

 * function 밖에 써야하기 *

 

function Modal(){
  return(
  	<>
    	<div className= 'modal1'>
        	<h4>제목</h4>
        	<p>날짜</p>
        	<p>상세내용</p>
    	</div>
    </>
  )
}

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

 

컴포넌트 언제 만들면 좋을까?

1. 반복적인 html 축약할 때

2. 큰 페이지들

3. 자주변경되는 것들

 

 

컴포넌트 단점

1. state 가져다쓸 때 문제생김

다른 함수에서 가져다 못씀 (변수의 범위가 함수 안이라서 그럼)

 

 

컴포넌트 만드는 문법 2

let Modal = () => {
	return(
    )
   
}


const Modal = () => {
	return(
    )
   
}

 

3. 버튼을 누를 떄 마다 모달을 on/off 하는 기능

 

동적인 UI 만드는 단계

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

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

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

 

 

html코드에선 조건문을 쓰려면 삼항연산자라는 것을 사용해야한다.

{
	조건식 ? 참일때 실행되는 코드 : 거짓일 때 실행할 코드
}

<div className='list'>
        <h4 onClick={ ()=>{ 
          modal == true ? setModal(false) :
         setModal(true) }}>{ 글제목[2] }</h4>
        <p>10월 05일 발행</p>    
      </div>

      {
        modal == true ? <Modal/> : null
      }

4. div

 

map

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

2. 함수의 파라미터는 array안에 있던 자료

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

[1,2,3].map(function(a) {
	return 'Hi react'
 }}

결과 >>  ['Hi react','Hi react','Hi react']

 

map 함수를 통해서 좋아요 버튼과 modal 함수도 넣어 코드 줄여보기

 

let [좋아요, 좋아요변경] = useState ([0,0,0]);
{
        글제목.map(function(a,i){
          return (
            <div className='list'>
        <h4 onClick={ ()=>{
          modal == true ? setModal(false) :
         setModal(true) }}>{ 글제목[i] } <span onClick={ ()=>{  
         let copy = [...좋아요];
         copy[i] ++;
         좋아요변경(copy) }}>❤</span> {좋아요[i]}</h4>
        <p>10월 04일 발행</p>    
      </div>
          )
        })
      }

 

 let [좋아요, 좋아요변경] = useState ([0,0,0]);  << useState에 0이 하나면 하트를 누를 때 마다 모든 게시글에 좋아요가 올라가니 게시글마다 각각 state를 할당한다.

 

그리고 map함수가 돌 때마다 i가 올라가니 copy[0]~copy[2] 까지를 불러와 state 적용을 시켜준다.

 

#결과