[코드 스테이츠] 25일차, 진짜 React 잘하고 싶다

  계속 보면 정든다고, React 계속 보니까 정든다. 아니 이제는 정이 드는 것을 넘어서 더 알아가고 싶다. React 왜 이렇게 좋아...? 프론트엔드 개발자들이 React에 그렇게 환호성을 지르던데 그 이유를, 아직 개발의 개자도 잘 모르는 내가 느끼고 있다. 사실, 여태까지 나는 HTML, CSS 만을 갖고 생코딩을 했기 때문에 더 강렬하게 느끼는 것일 수도 있다. 분명, React는 새로운 문법도 익혀야 하고, 여러가지로 굉장히 어려운 과목이기는 하지만, 그럼에도 이건 진짜 배워야 겠다는 생각이, 정복해야겠다는 생각이 하면 할수록 강하게 든다. 혼자서 패캠 강의를 들을 때만 해도 그렇게까지 느끼진 못했는데 내가 직접 만들어보니 정말, 이건 혁신이라는 말밖에 나오지 않는다.

 

정말 열심히 공부해서 React를 잘 다루는 프론트엔드 개발자가 돼야겠다. 

---

[ 오늘의 TODO ]

1. 코드 스테이츠) React SPA
2. 코드 스테이츠) Pair-Programming
   // Bare
   // Advanced 
3. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
   // 드디어 진도를 나갈 수 있어!!!!! ㅠㅠ
4. 생활) 물 1L 이상 마시기
5. 개선) 페어 프로그래밍할 때도 혼자 있을 때처럼 침착하게 오류 대처하기
   // 오늘은 그냥 좀 쉬웠다

---

[ 오늘의 해결 ]

1.  useHistory 

  오늘 Advanced 를 풀기 위해서는 이 useHistory가 필요했다. 사실 History를 구글링하다 보니 굉장히 많은 내용이 나왔는데 역시 이럴 땐 예~전에 다른 사람들이 적은 글이 아닌(지금의 내 글도 그렇겠지만) 근본이자 MDN처럼 정석적이고 뿌리 깊은 사이트를 찾아봐야 한다. 본문 내용을 읽어 보면 useHistory Hook은 탐색할 때 필요한 history instance에 접근한다고 한다. 즉, Router를 통해서 link를 탄 그 흔적을 추적하는 내용인 것 같다. 덕분에 뒤로 가기 버튼, 앞으로 가기 버튼을 수월하게 만들 수 있었다. 밑에는 본문에서 가져온 예제다.

 

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

 

 

https://reactrouter.com/web/api/Hooks/usehistory

React Router: Declarative Routing for React

 

2. NavLink 

  NavLink를 갖고 active됐을 때, 아이콘에 스타일을 입히고 싶었다.

 

<NavLink exact to="/">
  <i className="far fa-comment-dots"></i>
</NavLink>

 

  그 때 나는 가장 먼저 생각했던 게 아 그냥 activeStyle을 입히면 되겠구나 했다. 그런데 아이콘은 전혀 변화가 없었다. </i> </NavLink> 이 사이에 들어가는 텍스트에만 스타일이 입혀지지 아이콘은 색이 바뀌지 않았다. 사실, 나는 함수로 어떻게든 실현을 했었다. 그런데 그렇게 하니 NavLink를 쓸 이유가 사라졌다. 그래서 어떻게 안 되는 건가 하고 포기하려고 하던 중 마지막 수단으로 우리 코드 스테이츠 동기들 모임챗에 이거 해낸 사람 있는지 물어보니 내 전 페어분께서 DM으로 본인이 이번에 페어 맺으신 분이 성공했다고 연락을 줬다. 덕분에 그 해내신 분께 DM을 보내어 하는 방법을 알아냈는데 그 방법은 이렇다

 

<NavLink acitveClassName="Message" exact to="/">
  <i className="far fa-comment-dots"></i>
</NavLink>


/* CSS */
.Message > .far.fa-comment-dots {
 
}

 

  진짜, 쉬운데 이걸 못찾았다니... className을 쓸 생각은 했으나 CSS 자체를 건드릴 생각을 못한 내가 바보처럼 느껴졌다. 사고의 방식을 깨야할 것 같다.

---

[ 오늘의 교훈 ]

1.  안 되는 거 붙잡지 말고 다른 방법으로 생각해보자.

  이건 방금 전에 작성한 두 번째 해결과 맞닿은 부분이다. 나는 함수까지도 사용해봤고, activeStyle도 사용해봤고 심지어는 className 까지 사용해서 그 때의 style을 입혀보고자 노력했다. 그래도 안 됐다면 또 다른 추가적인 방법을 생각해야 했는데 activeStyle이 안 되니까 className으로 해서 시도를 해보고 이게 안 되니까 또 activeStyle로 가서 헤매고, 이게 또 안 되니까 className으로 가서 아까 전에 안 됐던 방향과 별 다를 바 없는 방식으로 코딩을 짜고 그랬다. 그러니까 발전이 없지....

 

  생각의 유연성을 길러야겠다. 아직은 코딩을 시작한지 얼마 되지 않았기 때문에 좀 딱딱할 수 있겠지만, 그래도 조금씩 다른 방법들을 생각해보고 내가 배운 모든 것들을 응용해서 생각해보자는 마음 가짐으로, 한 문제를 풀더라도 깊게 풀 수 있도록 노력해야겠다.