[TIL] Twittler React

코드스테이츠 이머시브코스에서 드디어 리액트를 시작했습니다!!!(짝짝ㅉ가) 솔로 스프린트로 시작을 했고 처음 npx create-react-app을 이용한 시작부터 끝까지 간단한 페이지를 리액트 형식으로 짜보는 시간을 가졌습니다.

오늘 제가 만든 웹페이지입니다. 이번 시간에는 css보다 리액트를 많이 사용하고 이해하고 싶어서 최종 결과물이랑 거의 일치하게 만들었습니다.

다음에 리액트를 사용할 때 같은 문제에 봉착했을 때 원활히 해결하기 위해서 이번 글은 리액트 스프린트를 하면서 제가 난관에 부딪히고 이를 해결하는 과정을 위주로 글을 써보겠습니다.

1. 처음 웹을 띄웠을 때 트윗된 내용이 2개 있기 때문에 App 컴포넌트를 클래스 형태로 만들어서 생성자에 this.state에 값을 할당하고, 리턴 값으로 웹페이지의 기본적인 형태를 작성했습니다. 이때 주의할 점이 하나의 앨리먼트로 만들어야한다는 점...두개로 만들어서 실행하면 에러가 떠서 신기했습니다.

2. 트윗하나를 띄우기 위한 SingleTweet컴포넌트를 function형태로 만들었습니다. 주어진 예시와 동일하게 변수로 children, date, writer를 주고 App클래스 안에 render메소드를 만들어서 변수로 this.state.tweets의 mapping한 형태로 배열 하나하나의 값을 받아서 SingleTweet컴포넌트를 하나씩 실행하여 2개의 트윗이 뜨도록 만들었습니다. 여기서 매핑을 할 경우 컴포넌트 하나하나마다 구분을 위해 키를 달아주어야 한다는 것을 에러내용을 보고 구글링했습니다. 키를 어떻게하면 추가할 수 있을까 생각하다가 컴포넌트 변수에 key를 추가해주어서 리턴값 상위 앨리먼트에 key를 추가해주니 정상작동했습니다 ㅎㅎ

3. 다음으로 mapping 변수 를 만들어서 map안에 el변수마다 SingleTweet(el.uuid, el.content, el.date, el.writer) 저는 이런식으로 매핑되게 만들었는데 궁금한 것은 <SingleTweet key = {el.uuid} writer = {el.writer} date = {el.date} children = {el.content} /> 처음에는 해당 방식으로 만들어서 에러가 많이 나서 시간을 많이 잡아먹었습니다. 이런식으로는 만들 수 없는지 궁금했는데 구글링을 해도 마음에 드는 정보를 찾을 수 없었습니다ㅠㅜ 주말을 이용하여 더 찾아봐야할 것 같습니다.

4. 그리고 버튼이 클릭되고 트윗을 새로 남기기위해 글을 쓰는 공간에 onClick, onChange 시에 메소드를 실행해주기 위해 새로 onClick, onChange를 만들고 this.onClick, this.onChange를 주었는데 여기서 콜백함수에 this를 사용하려면 this.render = this.render.bind(this)를 사용해주어야합니다. 이유로는 JavaScript에서 클래스 메소드는 기본적으로 바인딩되어 있지 않습니다. 일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메소드를 바인딩 해야 합니다.

5. textArea에서 onChange가 되면, 내용이 작성된다면 함수가 실행됩니다. 안의 내용은 새로운 트윗의 형태를 정의해주는 형식으로 만들었습니다. 이또한 this를 사용하기 때문에 바인드를 해주었습니다.

6. 새 글을 쓰고 onClick이 발생할 경우 기존의 this.state.tweets에 onChange의 내용이 추가되고 그값이 창에 뜨도록 만들어야 합니다. 그러기 위해 e.preventDefault()를 띄워 자동으로 새로고침을 막아주고, this.setState를 이용해서 값을 넣어주었습니다. 그런데 여기서 생긴 문제는 같은 키에 추가를 해주어야하는데 새로운 값만 키에 들어가서 기존의 내용이 없어져버렸습니다. 그래서 기존의 내용을 연결해주기위해 onChange의 객체 안에 Spread Operator를 사용하여 기존의 값을 추가하고 그밑에 새로운 값을 넣어주는 형식으로 만들어 주는 방식으로 문제를 해결했습니다.

리액트 형식의 코드를 처음 만들었는데 기존에 배웠던 클래스, 메소드, 함수 등등이 복합적으로 나오고 처음이라는 낯선 감정이 섞여서 어렵게 느껴지는 것 같았습니다. 하지만 막상 만들고 나니까 훨씬 가독성, 재사용성이 좋은 것 같다는 느낌이 들었습니다. 아직은 스프린트들이 어렵지만 공식문서를 보면서 해결하는 경우가 많아졌고, 모르는 이슈가 생겼을 때 구글링을 하여 해결하는게 재밌어집니다. 얼른 리액트를 잘 활용하고 싶은 마음이 더 크기에 다음 스프린트도 기대가 됩니다.ㅎㅎ