안녕하세요. 엔지엠소프트웨어입니다. 앵귤러(Angular.js)를 이용해서 웹앱을 만들어봤었는데요. 리액트는 이제 배우면서 처음 개발을 시작합니다. Angular나 React 또는 Vue가 자바스크립트 배이스라서 기본기만 있다면 쉽게 배울 수 있을거 같긴합니다. 프로젝트 시작한지 한달정도 되었는데요. 한달동안 기본 구조를 잡고, 시니어 개발자와 주니어 개발자들에게 업무를 분담해주느라 리액트 공부를 못했습니다. 프로젝트를 시작한지 한달이 지난 지금에서야~ 좀 볼 수 있겠네요. 업무 회의를 하다보니 공통으로 사용될 수 있는 데이타 조회용 컴포넌트가 있었습니다. 지금은 화면 이곳 저곳에서 중복 코드를 발생시키고 있어서 빨리 정리해야겠다는 생각이 들더군요.

 

 

쓸데없는 소리를 너무 길게 했는데요. 우선, 저처럼 C#이나 Java를 주로 사용하다가 React를 접하면 어디서부터 어떻게 접근해야 할지 난감할 수 있습니다. [ React 개발 환경 구성 ]을 마치면 아래 글들을 한번 읽어보세요. 웹개발에 대한 전반적인 내용을 이해하는데 도움이 될거 같습니다.

[ 현업 개발자가 알려주는 웹프로젝트 만들기 5부작 ]

 

 

React에서 Loaded 이벤트는 useEffect입니다. 개발자들이 만든 검색 필터 컴포넌트 코드를 분석하는데 계속 페이지가 로딩될때마다 서버에 데이타를 요청하더라고요. 자바스크립트에서 onload 이벤트를 사용하기 때문에 리액트도 비슷할줄 알았는데... 전혀 다른 이름을 사용하고 있어서 한참을 찾았습니다. 빨리 구글에 검색해볼걸... 후회가 되는군요^^; 아래와 같은 컨트롤(웹에서는 컴포넌트라고 부름)을 만들고 있습니다. 대충 디자인은 AntDesign을 붙인거고요. 빨리 디자이너와 퍼블리셔가 와야... 좀 더 편하게 개발할거 같습니다.

 

 

nextjs와 ts 환경에서 react hook page loaded 이벤트는 useEffect입니다. useEffect는 Javascript의 onload, Windows의 loaded와 같습니다. React의 componentDidMount입니다. 프로그래밍 개발을 오래 해보신 분들은 생명주기라는 말을 들어보셨을겁니다. 리액트는 컴포넌트 생명주기를 가지는데요. 아래 메소드들은 컴포넌트의 인스턴스가 생성되어 DOM에 추가될 때 순서대로 호출됩니다. 우리는 nextjs와 ts를 사용하기 때문에 useEffect에 페이지가 로딩된 후 실행되어야 할 코드를 작성하면 됩니다.

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

 

useEffect 정의부 첫번째 인자는 콜백함수를 구현하며, 두번째 인자는 영향받을 객체의 배열을 저장합니다.

    /**
     * Accepts a function that contains imperative, possibly effectful code.
     *
     * @param effect Imperative function that can return a cleanup function
     * @param deps If present, effect will only activate if the values in the list change.
     *
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#useeffect
     */
    function useEffect(effect: EffectCallback, deps?: DependencyList): void;

 

마지막 인자에 []을 넣어주면 최초 한번만 수행합니다.

  {/*
    WebPage 가 Loaded되면 최초 발생하는 이벤트입니다.
  */}
  useEffect(() => {
    
  }, []);

 

면접 보는 디자이너와 퍼블리셔분들이 처음 시작하는 프로젝트라고 하니... 고생스러울까봐 그런건지 최종 입사 제의는 반려하네요-_-; "연봉이 안맞아서 그런걸수도 있겠구나"라고 생각하고 있긴하지만... 그래도 괜찮은 분들이 몇분 계셨었는데 함께하지 못해서 아쉬움이 있습니다. 필터 컴포넌트를 개발하면서 초보자를 위한 팁 같은것들을 좀 더 작성해보도록 하겠습니다. 처음부터 연재형식으로 글을 작성했으면 좋았을텐데 아쉽네요^^;

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0