[React] React 살짝 맛보기

Date:     Last Updated:

리액트를 써보자는 의견을 제시했다.

  • 마지막 프로젝트에서 MVC의 V를 리액트로 사용해보자는 의견을 제시해봤다.
  • 당장 정해진 것은 아니지만, 또 아직 배울 스프링이 너무 많지만 React도 아주 살짝만 맛보는 것도 나쁘지 않을 것 같았다.
  • 그래서 조원들에게 다들 리액트를 다룰 수 있을지 고민해보고 테스트 해보기로 했다.

반응형, 동적웹이라는 것은 참 재미있다.

  • Servlet과 Struts를 배우면서는 ajax나 jquery를 안썼어서 어떠한 Event를 할때마다 화면이 새로고침되고 반짝 거렸다.
  • 그러다가 Struts2를 거의 다 배우고 스프링 넘어가기 직전에 ajax와 jquery를 잠시 배웠다. 물론 그 전부터 살짝 써봤지만
  • 페이지가 변하지 않고 SPA처럼 움직이는 것은 사용할 때는 몰랐는데 만드는 입장에서는 참 신기하고 재밌었다.

그리고 리액트와 첫 만남은 좀 별로였다.

  • js의 기본적인 문법을 보고 리액트를 봤음에도 처음 app.js 코드를 보는데 정말 1도 이해가 안갔다.
  • 제일 처음 본 이 App 함수는 js를 보고 갔는데도 이게 뭔가 싶었다. 코드적인것이야 이렇게 생겼구나~~ 하고 이해가 갔지만 이걸 왜 이렇게 쓰는거지???
  • 라는 물음이 30개정도 머리속에 떠올랐다.
1
2
3
4
5
6
7
8
9
10
11
12
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}

무언가를 배울땐 역시 공식문서가 최고다.

  • https://ko.reactjs.org/docs/hello-world.html 리액트 공식튜토리얼인데 정말 쉽게 잘 알려주더라.
  • 당장 여기에 매달려서 배울 시간은 크게 없지만 위의 App함수 아니 App컴포넌트를 이해하기에는 얼마 걸리지 않았다.

element와 component

  • 프로그래밍 언어적으로 표현하자면 element는 변수, component는 함수 난 이렇게 이해했다.
  • 물론 component는 클래스로 만드는 법도 있지만 리액트에서도 별로 권장하지는 않는 모양새였다.

조금만 더 맛을 보도록 하자.

  • 오늘 DB 설계한다고 머리가 빠질 것 같았는데 뭔가 코드를 짜니까 재밌어서 좋았다.
  • 내일은 또 내일 할일이 많지만 틈나는 대로 공부해보자. 재밌네.

Leave a comment