먼저 리액트에 관한 내용을 적기 전에 나는 리액트를 배우기 위해 지금의 위코드에 들어오게 되었다는 말을 하고싶다. 솔직히 그동안의 HTML, CSS, JS 등의 공부들도 너무 재밌었지만 내가 프론트엔드 개발자를 꿈꾸면서 이렇게 뭔가 배운다고 했을 때 가슴 뛰게 만드는 공부가 드디어 시작되었다. 그럼으로 그동안 소홀했던 블로그에 리액트에 관한 내용을 열심히 적어볼 생각이다. 전 직장에 있을 때 항상 다른 사람과 나를 비교하면서 부족하다고 느꼈던 부분을 리액트 라이브러리를 통한 나만의 기술스텍으로, 나만의 색깔이 있는 개발자로 성장하고싶다. 화이팅!

React란?

프론트엔드 개발자가 되기 전 리액트는 공식홈페이지가 정말 최적화 되어있다는 말을 들었다. 그래서 공식홈페이지의 말을 조금 빌려보았다.

리액트는 상호작용이 많은 UI를 만들 때 작은 컴포넌트 단위로 관리하여 효율적으로 선언 및 관리를 할 수 있다. 각각의 기능 및 단위별 관리가 용이하여 유지보수가 쉽고 복잡한 로직을 작은 단위로 나누어 구성할 수 있다는 장점이 있다.

컴포넌트(component)

위에서 말한 UI의 작은 단위 즉, 컴포넌트는 두가지 방법으로 선언이 가능하다. 첫번째는 클래스(Class)형 컴포넌트와 함수형(function)컴포넌트 방식이 있다. 과거에는 class형 컴포넌트의 state, lifecycle을 관리를 통해 많이 사용이 되었으나, 16.8 버전 이후 함수형 컴포넌트에서 hook을 통한 위의 관리가 가능해져 많은 개발자들이 함수형 컴포넌트를 선호하게 되었다. 아래는 각각의 컴포넌트 선언방식을 적어보았다.

//클래스형 컴포넌트
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello 
      </div>
    )
  }
);

//함수형 컴포넌트
function React.Component() {
  return (
      <div>
        Hello
      </div>
    );
};

이 글을 쓰는 나 또한 함수형 컴포넌트를 선호하는 편이고 앞으로 써내려갈 관련 개발 내용도 함수형에 관한 내용을 정리할 예정이다. 당장 부트캠프 기간동안 당장의 리액트 개발을 시작하려면 시간이 많이 부족하기 때문이다....^_ㅠ 암튼 화이팅!