[React] 블로그 글발행 기능 만들기

💡 실습 포인트!

• 오늘은 블로그 글발행 기능을 만들어보았다.
• 매번 짧은 강의에 필요한 내용만 이해하기 쉽게 담아내는 강의력도 강의력이지만, 강사님이 하시는 말씀이나 강의노트가 너무 웃겨서 공부하며 코드 작성하는 게 재미있다.
• 다행히도 30초 생각해보고 "아 모르겟넹 잇힝~" 하는 일은 없었고, 코드작성하고 브라우저에서 직접 확인하는 데까지 10분 정도 걸린 것 같다.
• MongoDB 다루는 방법도 전체적으로 한번 공부했으니 나중에는 이렇게 '등록하기' 버튼을 통해 전송된 데이터를 DB 에도 저장하고 불러올 수 있지 않을까.

---

💜 사용자가 입력한 글을 변수에 저장하기

🤍 사용자가 input 에 입력한 데이터를 state 로 저장하기

• 사용자가 input 에 입력한 데이터는 중요한 데이터이기 때문에 state 에 저장하여 사용하는 게 일반적이다.

let [input, setInput] = useState('');

• 따라서 useState() 를 사용하여 state 를 하나 만들어주었다.
• input 태그의 초기값은 공란이므로 따옴표로 빈 문자열을 표현해주었다.

---

🤍 사용자가 input 에 입력한 값 알아내어 state 에 저장해보기

function App() {

  let [input, setInput] = useState('');
  
  return (
    <div className="App">
        <input onChange={ (e)=>{ setInput(e.target.value) } } />    
    </div>
  );
}

• input 에 입력한 값을 알고 싶다면 input 에 onChange 라는 이벤트핸들러를 붙여서 사용하면 된다.
• 일반적으로 onChange 는 input 에 무언가를 입력할 때마다 특정 함수를 동작시키고 싶을 때 사용한다.
• e.target 은 지금 이벤트가 동작하고 있는 HTML 요소 즉, 여기서는 input 을 의미하므로 e.target.value 는 input 에 입력한 값이 되는 것이다.
• 따라서 위 코드를 해석하자면 input 에 무언가를 입력할 때마다 input 에 입력한 값을 setInput() 에 넣어서 input 의 값을 변경하여 저장해달라는 말이 된다. 
• 이러한 방법은 <input> 외에도 <textarea>, <select> 등에도 사용이 가능하다.

---

💜 블로그 글발행 기능 만들기

🤍 UI 디자인해보기

<div className='publish'>
    <input onChange={ (e)=>{ setInput(e.target.value) } } />
    <button>등록하기</button>
</div>

 

.publish {
	margin: 20px 0;
}

.publish input {
	width: 80%;
	height: 25px;
	font-size: 18px;
	padding: 10px 15px;
	border-radius: 5px;
	border: 1px solid grey;
	background: #eee;
}

.publish input:focus {
	outline: none;
}

.publish button {
	padding: 13px 30px;
}

.publish button:hover {
	background: lightcoral;
	color: white;
	transition: all 0.5s;
	transform: scale(1.05);
}

• 글발행을 위해 먼저 글을 적을 수 있는 UI 를 만들어보았다.
• 크게 디자인할 필요는 없고, input 과 button 만 넣고 간단한 효과만 주었다.

---

🤍 블로그 글발행 기능 만들기

// 전체 코드 미리보기
// 전체 코드가 너무 길어서 불필요한 코드는 제외했다.

function App() {

  let [title, setTitle] = useState([
      '[React] React 설치와 개발환경 셋팅하기', 
      '[React] JSX 를 이용해 HTML 페이지 제작해보기', 
      '[React] React 에서 state 변경해보기'
  ]);
  
  let [thumbsUp, setThumbsUp] = useState([0, 0, 0]);

  let [clickedNum, setClickedNum] = useState(0);
 
  let [input, setInput] = useState('');
  
function addTitle(input) {
    let newTitle = [...title];
    newTitle.unshift(input);
    setTitle(newTitle);
}

  return (
    <div className="App">

      {
        title.map(function(content, idx){
          return (
          <div className='list' key={idx}>
            <h3 onClick={()=>{setClickedNum(idx)}}>
                {content}
                <span className='thumbs-up' onClick={ ()=>{ changeThumbsUp(idx) } }>👍</span> 
                {thumbsUp[idx]} 
            </h3>
            <p>2022-03-18</p>
            <hr/>
          </div>            
          )
        })
      }

      <div className='publish'>
        <input onChange={ (e)=>{ setInput(e.target.value) } } />
        <button onClick={()=>{addTitle(input)}}>등록하기</button>
      </div>
      
    </div>
  );
}

• 글발행 기능이란, input 에 사용자가 게시글 내용을 작성한 후에 '등록하기' 버튼을 누르면 게시글 리스트 중 맨 위 게시글로 작성한 게시글 내용이 등록이 되는 것이다.
• 게시글 리스트에 사용자가 작성한 게시글이 추가되려면 title 이라는 state 에 저장된 array 에 input 에 입력한 내용을 맨 첫 요소로 추가해주면 된다.

<button onClick={()=>{addTitle(input)}}>등록하기</button>

• 이는 button 태그의 onClick 속성에 바로 코드를 작성해주어도 되지만 가독성을 위해 따로 addTitle() 함수를 만들어주고 input state 를 input 이라는 파라미터로 넣어주었다.

function addTitle(input) {
    let newTitle = [...title];
    newTitle.unshift(input);
    setTitle(newTitle);
}

• addTitle() 함수는 위와 같이 만들어주었다.
• 먼저 title 이라는 state 에 저장된 array 를 깊은 복사를 해서 newTitle 이라는 사본을 만든다.
• 만들어진 사본인 newTitle array 에 unshift() 를 사용하여 파라미터로 받아온 input 을 newTitle array 의 맨 처음 요소로 삽입해준다.
• 그렇게 만들어진 newTitle array 를 setTitle() 함수에 넣어서 title 이라는 state 에 저장된 array 를 newTitle array 로 교체해준다.
• 이제 input 에 입력했던 내용이 title 이라는 state 에 추가가 되고, map() 함수를 통해서 렌더링되고 브라우저 화면에 보이게 된다.