React와 Django로 만드는 블로그-글작성(1)

cmong·2021년 2월 9일
0
post-thumbnail

현재 프로젝트의 기술 스택은 https://github.com/wnsdudSoftkim/Tech_Blog 에서 확인 할 수 있습니다.

1. 참조할 만한 레이아웃 구글링

프론트 작업 중 생각보다 오래걸렸던 작업 중 하나는 레이아웃 구성입니다. 디자인 짜는 감각이 부족하고, 전공이 아니라면 오래 걸릴 수 밖에 없습니다. 디자인이 목적은 아니지만 적어도 보여지는 부분은 조금은 깔끔하게 짜야 한다고 생각하기에 velog, Medium, branch, tistory 등 깔끔하게 레이아웃 구성이 되어있는 웹들을 찾아봅니다.
저는 Post를 보여지는 레이아웃에는 Medium을 참조했고 Post가 작성되는 레이아웃에는 velog를 참조했습니다.

2. 글 작성 레이아웃

나만이 작성하는 블로그라도 글을 작성하는 구간과 내가 작성하는 글을 볼수있는 Preview 구간이 필요합니다. 그래야 깔끔하게 글을 짤 수 있기에.

예시로 Velog를 참조하겠습니다.

2-1 글작성, Preview 구간

예시 이미지 처럼 H1 H2 H3 등등은 나중에 작업할 구간이며 지금은 제목을 쓰는 Input 과 내용을 적을 Input , 현재 적는 Input을 바로 보여줄 Preview 구간을 먼저 작업해야 합니다. React 에서 Input을 써봤다면 같은 function 안에서 useState를 쓰고 Change가 됬을 때 e.target.value를 통해 state 값을 변화 시켰을 텐데. 에러가 납니다.

const [headerinput,SetHeaderInput] = useState({header:""})
   const {header} = headerinput
   const onChangeHeader = e => {
       e.preventDefault()
       SetHeaderInput({
           header:e.target.value

       })

   }   

React는 Input값에 onChange 와 useState 이벤트를 걸어놓으면 함수 자체가 re-rendering 되는 특징이 존재합니다. 그러면 글자를 하나만 입력해도 함수가 re-rendering 되면서 input에 focus를 잃게 되겠죠. 그러면 클래스 기반으로 다시 react를 짜야 할까요?

저는 Input을 하는 구간을 함수 밖으로 내보내 주었습니다. 그래서 보는 바와 같이 Header는 제목 , Body는 글을 작성하는 구간입니다.(더 나은 방법이 있으면 알려주시면 감사합니다) Header만 다뤄보면 함수 안에는 useState를 통해 변화되는 Input 값들을 관리하고 있습니다. if 문에서 함수 밖에 있는 data 변수를 쓴 이유는 뭘까요?

이 data 변수는 통신을 보내주기 위한 변수입니다. 통신은 다른 function에서 작동하며 버튼을 누르게 되면 통신이 되는 식으로 작동이 되겠죠.

다음은 Preview를 알아보겠습니다.

0개의 댓글