[ 원숭이의 React ] 블로그 글 발행 기능개발

 

 

 

강의 보는 내 표정

 

 

 

저는 이런 스텝으로 개발을 진행해보았습니다.

1. 일단 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장부터 할 것입니다.

(중요한 데이터는 일단 저장해두는게 좋으니까요)

 

2. 버튼을 누르면 그 state를 [글제목이라는 state] 어레이의 뒤에 하나 뿅 추가할 것입니다.

이게 끝입니다. 그러면 알아서 글이 4개 보일 것입니다. 

왜 4개가 알아서 보이냐고요? state 변경하면 HTML도 알아서 재렌더링 되니까요.

그러니 div를 하나 더 만들어주세요~ 이런 코드는 필요가 없습니다. state만 변경하면 됩니다. 

 

 

 

 

1. 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장하려면

 

기억이 안난다면 바로 저번 시간 input 다루기 강의를 참고하시면 되겠군요. 

 

 

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩 있는 곳
      <div className="publish">
        <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
        <button>저장</button>
      </div>
    </div>
  )
}

- 입력값이라는 state를 하나 만들어뒀고,

- input에 뭔가 입력할 때마다 state로 저장되도록 기능개발을 했습니다. 

그럼 이제 input에 값을 입력할 때마다 입력값이라는 state에 실시간으로 저장됩니다.

 

 

 

 

2. 버튼을 누르면 입력값 state를 [글제목] state에 추가할 것입니다.

 

이건 버튼에 onClick 달아서 기능개발하면 되겠죠?

 

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩 있는 곳
      <div className="publish">
        <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
        <button onClick={ ()=>{ 글제목변경(???) }}>저장</button>
      </div>
    </div>
  )
}

- 글제목변경() 함수를 써서 변경해야되는데 () 여기 소괄호 안엔 뭘 집어넣어야하죠?

글제목변경( [ 입력값이라는state, '남자코트추천', '강남우동맛집', '파이썬독학' ] )

이걸 넣어주셔야합니다. 하드코딩해서 넣기보다는 개발자스럽게 넣어봅시다.

 

 

 

 

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩 있는 곳
      <div className="publish">
        <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
        <button onClick={ ()=>{ 

          let arrayCopy = [...글제목];
          arrayCopy.unshift(입력값);
          글제목변경( arrayCopy )

         }}>저장</button>
      </div>
    </div>
  )
}

3줄의 코드를 추가했습니다.

글제목이라는 state를 수정해서 글제목변경() 여기다가 집어넣어야하는데,

수정하는 방법은 unshift()라는 array 함수를 쓰시면 됩니다.

unshift()는 array의 맨 앞에 자료를 하나 추가하고 싶을 때 씁니다. 

근데 글제목이라는 state는 직접 수정하지 말랬죠!?

 

 

그래서 1. 글제목을 복사해서 arrayCopy라는 카피본을 하나 만들고,

2. 그걸 수정하고

3. 그걸 새로운 글제목state가 되도록 입력한 것입니다. 

기억이 안난다면 state변경강의를 참고합니다.