state 개별 숫자 증가, props

1. 과제

1-1. 반복문 처리 없이, 👍 클릭시 개별적으로 숫자 증가 구현하기

/*eslint-disable*/ //경고메세지가 뜨는 eslint 기능을 꺼준다.
import './App.css';
import {useState} from 'react';

function App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [좋아요, 좋아요변경] = useState([0,0,0]);
  let [modal, setModal] = useState(false);
  

  return (
    <div className="App">
      <div className="black-nav"> 
        <h4>ReactBlog</h4>
      </div>

      <div className="list">
        <h4>{글제목[0]} <span onClick={
           () => {
            let good = [...좋아요];
            good[0] = good[0] + 1;
            좋아요변경(good)
            } }>👍</span> {좋아요[0]} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}<span onClick={ () => {
          let good2 = [...좋아요];
          good2[1] = good2[1] + 1;
          좋아요변경(good2)} }>👍</span> {좋아요[1]} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}<span onClick={ () => {
          let good3 = [...좋아요];
          good3[2] = good3[2] + 1;
          좋아요변경(good3)} }>👍</span> {좋아요[2]} </h4>
        <p  style={{display:'inline-block', marginRight: '10px'}}>2월 17일 발행</p>
        <button onClick={ ()=> {
        modal == false ? setModal(true) : setModal(false)
        }}>모달버튼</button>
      </div>

      {/* {
        글제목.map(function(a,i){
          return (
            <div className="list" key={i}>
              <h4 onClick = { () => {setModal(!modal)}} > 
                {글제목[i]}
                  <span onClick={ () => {
                   좋아요변경(좋아요+1);
                  } }>👍</span> 
               {좋아요}
              </h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
      } */}


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

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

export default App;

 

1-2. 반복문 처리해서 구현하기

→ 이전 시간에 배웠던, 펼침연산자를 이용한 배열복사로 풀어준다.

{
        글제목.map(function(a,i){
          return (
            <div className="list" key={i}>
              <h4 onClick = { () => {setModal(!modal)}} > 
                {글제목[i]}
                  <span onClick={ () => {
                    let good = [...좋아요];
                    good[i] = good[i] + 1;
                   좋아요변경(good);
                  } }>👍</span> 
               {좋아요[i]}
              </h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
 }

🗨️사담)

맨 처음에 이렇게 했던 것 같은데 그때는 뭐 때문인지 오류가 계속 났다....

정답 볼까말까 고민하다가 반복문부터 적용해보지 말고, 반복문 없이 적용해보라는 멘트를 보고

반복문 없이 → 반복문 추가해서 처리하니 더 쉽게 구조가 보였다. 아직은 구조에 익숙하지 않으니,

이렇게 풀어서 바꾸는 방식으로 연습하는 게 좋을 것 같다.

 

 

2. Props

함수 안에 있는 모든 변수는 함수 바깥에서 쓸 수 없다.

그래서 Modal 함수에서 App 함수 내의 글제목 state를 가져 쓸 수 없다.

→ 이를 해결하기 위한 게 props

 

2-1. 부모 컴포넌트 → 자식 컴포넌트로 state 전송하기

props를 이용하면, 부모 컴포넌트에서 자식 컴포넌트로 state를 전송할 수 있다.

→ 부모 컴포넌트의 state를 사용할 수 있게 함

 

• 부모 컴포넌트 내 자식컴포넌트 사용하는 곳에 서  <자식컴포넌트 작명={state이름} /> 
• 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

* props 작명은 보통 사용하려는 state 이름으로 쓴다. (다른 것도 가능)

* props는 부모에서 자식 컴포넌트로만 가능하다.

 

funcion App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  
  return (
	<div className="App">
    	<Modal 글제목={글제목}/>  {/* <자식컴포넌트 작명={state이름} /> */}
	</div>
  )
}

//자식컴포넌트 - Modal
function Modal(props) {
  return (
    <div className='modal'>
      <h4>{props.글제목}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div> 
  )
}

 

* props의 파라미터로 넘길 수 있는 것은 state만 넘길 수 있는 게 아니라 일반 변수, 함수, 문자 전송도 가능

* 문자 전송시에는 중괄호 없이도 가능하다.

funcion App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  
	<div className="App">
    	<Modal color={"pink"} 글제목={글제목}/> 
        {/* <Modal color="pink" 글제목={글제목}/> */}
	</div>
}

//자식컴포넌트 - Modal
function Modal(props) {
  return (
    <div className='modal' style={{background : props.color}}>
      <h4>{props.글제목}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div> 
  )
}

 

* 파라미터 문법

매개변수(parameter) 는 함수에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미

인수(argument)는 함수가 호출될 때 함수로 값을 전달해주는 값

function run(매개변수) {
	실행할 코드;
}

run(인수);

자바스크립트에서는 정의된 함수보다 적은 인수가 전달되어도 오류가 발생하지 않는다.

대신 전달되지 않은 매개변수는 undefined로 값 설정된다.

 

 

 

2-2. props 과제

자식 컴포넌트(모달)의 수정버튼을 누르면, 모달 내 제목 변경하기

funcion App() {
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  
	<div className="App">
    	<Modal color={"pink"} 글제목={글제목} 글제목변경={글제목변경}/> 
	</div>
}

//자식 컴포넌트 
function Modal(props) {
  return (
    <div className='modal' style={{background : props.color}}>
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={()=> {
        // 2-1.
        // props.글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬독학'])
        
        // 2-2. 펼침연산자를 통해 복사 후 변경
         let copy = [...props.글제목];
         copy[0] = '여자코트 추천';
         props.글제목변경(copy)
        
        
        //1. 그대로 바꾸면 → 동일한 state로 생각해 안바뀜
        // props.글제목[0] = '여자코트 추천';
        // props.글제목변경(props.글제목)
        // console.log(props.글제목)
        }}>글수정버튼</button>
    </div> 
  )
}