[리액트] 공부 일지-2

리액트로 블로그 글 발행해보기

원래 이런상태의 페이지에서 input과 button을 추가하고 input값을 입력받고 버튼을 누르면

저기 '남자 코트 추천'글 위에 새로운 글이 발행되게 기능을 구현해볼 것이다.

 

{
        글제목.map(function(글, i){
          return (<div className='list' key={i}>
          <h3 onClick={()=>{누른제목변경(i)}}>{글}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h3>
          <p>12월 30일 발행</p>
          <hr />
        </div>
          )
        })
      }

현재 저 화면을 나타내는 코드 중 일부인데, 이렇게 map반복문을 통해서 저 글들을 출력하고 있다.

저 key={1}와 onClick={()=>{누른제목변경(i)}이 나타내는 것은 위의 화면에서 [열고닫기]버튼을 클릭하면 모달창이 나오는데, 저 글제목에 맞게 모달창이 변경되는 이벤트이다.

 

위의 화면처럼 나오게 된다. 모달에 대한 코드는 밑에 나온다.

<button onClick={()=>{modal변경(!modal)}}>열고닫기</button>

 {
        modal===true
        ? <Modal 글제목={글제목} 누른제목={누른제목}></Modal>
        : null
      }

function Modal(props){
  return (
    <div className='modal'>
        <h2>{props.글제목[props.누른제목]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

일단 모달에 대한 useState를 선언하고 모달이 true일때 앞서 보여준 모달창을 띄우도록 하는 형식이다.

맨 밑에 코드에서 글제목, 누른제목을 props로 받는 이유는 function Modal에서는 글제목과 누른제목이 선언되지 않았기 때문에 그냥 불러올 수 없다. 그래서 <Modal 글제목={글제목} 누른제목={누른제목}></Modal>와 같이

글제목과 누른제목을 props형식으로 Modal함수에 보내준다.

 

이제는 새로운 글을 발행하는 input창과 Button을 만들어보겠다.

<div className='publish'>
        <input onChange={ (e)=>{입력값변경(e.target.value)} } />
        <button onClick={()=>{
          var arrayCopy = [...글제목];
          arrayCopy.unshift(입력값);
          글제목변경(arrayCopy);
        }}>저장</button>
      </div>

일단 div하나를 만들어주고 classname은 아무렇게나 지어준다.(css로 잘 꾸며준다)

그리고 그 안에 input과 button을 하나씩 넣어준다.

input에 어떤 것을 입력받을 때 그 상태를 계속해서 바꾸어주어야 하므로(미리 useState로 입력값,입력값변경 선언)

onChange함수를 이용해 현재까지 입력받은 값을 useState 입력값에 넣어준다.

버튼에는 onClick함수를 이용하여 클릭했을 때 이벤트를 설정해준다.

글제목이라는 state를 직접 변경하면 안되므로 arrayCopy라는 변수를 선언해 글제목 배열을 복사해준다.

unshift는 배열의 맨앞에 공간을 만들어 값을 넣어주는 역할을 한다.

그렇게 새로운 값을 추가한 arrayCopy를 글제목변경 state에 넣어 state를 변경해준다.

그러면 자동적으로 위의 코드들과 연동?되어 버튼을 눌렀을 때 새로운 글이 발행이 된다.

 이상입니다!