잡담

오랜만에 포스팅! 한동안 일이 바뻐서 스터디도 잘 못하고... 그랬는데 개천절인김에 오랜만에 포스팅 하려고 한다. 회사에서 리액트,넥스트,jsx,styled-jsx 등을 사용해서 프로젝트가 진행 되는것이 많다.

하지만 나는 업무를 배분 하면서 그런 프로젝트에 팔로업이 안되고 ejs,cjs,typescript,json 등을 사용하는 프로젝트에 팔로업이 돼 있는 상황이다.

잠깐 맛보기로 해보긴 했지만 전혀 모르니 스타일정도만 수정하는게 전부였다.

그래서 알고 싶은 욕심이 나서 스터디 외 따로 시간을 내서 공부를 해보려고 한다.

계획

무료 강좌가 꽤 있다. 하지만 처음부터 노드 js를 이용해서 환경 셋팅을 하고 코드를 따라만 치니 까먹는 일이 많았다. 그래서 찾는 도중 무료강좌지만 원리 (심지어 노드가 아닌 cdn으로 하는 것부터 설명 한다.)를 설명이 돼 있는 강좌를 찾아서 이것을 따라 하면서 부가적으로 궁금한점을 검색 해서 배워보려한다.

향후 괜찮다고 생각이 들면 유료강좌를 결제해서 한번 더 깊게 파볼 생각이다.

리액트

일반 js에서 페이지를 구현할때 이벤트핸들러를 사용하는 경우가 많다.
이때 페이지에 변화가 있었을시(onClick,onChage,scroll 등등) 모든 요소들이 DOM에서 업데이트가 된다.

이에 반해 리액트는 기존 요소들 중에서 변경된 부분만 업데이트 된다. 이것이 리액트의 핵심적인 장점으로 알고 있다.

리액트 문법

오늘 포스팅 내용은 전부 cdn으로 연결해서 리액트를 사용하는 방법이다. nodejs X(원리를 이해하기위해서?) 이후 강좌에서 node를 사용하는것 같다.

옛날에 사용했던 방식을 먼저 배웠다. createElement를 사용해서 요소를 생성하고 렌더할 타겟에 뿌려주는 방식이다.

<div id="root"></div>

const h3 = React.createElement('h3', null);
ReactDOM.render(h3,root);

h3 요소를 만든 방법은 jsx를 사용함으로써 가독성이 높게 사용할 수있다. 함수로 만들어서 렌더를 해준다.

const App = () => (
   <h3>im gil!</h3>
);

ReactDOM.render(<App/>,root);

Hooks & useState

훅 이라는것은 보통 리액트는 class 문법으로 작성하는데 가독성이 떨어지고 불필요하게 길어지는 문제점을 보안하려고 함수로 사용할 수 있도록 만든것!

클래스보다 재사용하기 용이하고, 가독성면에서 좋다.

그중 useState는 이벤트핸들러를 이용해서 값을 참조(getter) 하거나 변경 시킬때(setter) 유용한 기술이다.

//기본 문법
const [name, setName] = React.useState();

내생각은....

보면서 느낀점은 배열을 이용해서 선언을 하는것인데, 이는 따로 변수 선언을 할때보다 코드수가 적고,

무엇보다 useState를 콘솔로 찍어보면 배열로 나오는데 첫번째 배열요소가 값이 나오며(인수로 넣은 초기값), 두번째 배열요소는 함수(setter함수 값을 변경할수 있음)이다.

console.log(React.useState()); // [undefined, function]

//일반 js에서 사용하는 법 (useState 문법 원리?)
const x = [1,2];
const [A,B] = x;
console.log(A); // 1 === x[0]
console.log(B); // 2 === x[1]

//배열 없이 사용한다면?
const x = [1,2];
const A = x[0];
const B = x[1];
console.log(A); // 1
console.log(B); // 2

useState사용

보통 useState를 사용 안해도 ReactDOM render를 사용하면 똑같이 구현을 할수 있다. 하지만 render 메서드를 호출을 해줘야하고 비효율 적이라고 한다.

function App(){
  
  let counter
  const onClick = () =>{
    counter = counter + 1;

    //이런식으로 다시 렌더....
    ReactDOM.render(<App/>,renderTarget);
  }

  return (
    <div>
      <h3>im gil! + {counter}</h3>
      <button onClick={onClick}>Count Up!</button>
    </div>
  );
  
}

ReactDOM.render(<App/>,renderTarget);

다시 돌아와 useState를 사용하여 상태값을 리프레쉬 해주자! 배열에서 첫번째 배열요소는 값을 참조하고, 두번째 배열요소를 이용해서 인수값으로 값을 전달 하면 값을 변경 시킬수 있다.

function App(){
  const [counter, setCounter] = React.useState(0);
  const onClick = () =>{
    setCounter(counter + 1);
  }

  return (
    <div>
      <h3>im gil! + {counter}</h3>
      <button onClick={onClick}>Count Up!</button>
    </div>
  );
}

ReactDOM.render(<App/>,renderTarget);

useState 사용시 권장!

useState setter 함수를 사용할때, 인수값으로 함수로 할당 하는것을 권장한다고 한다. 이유는 다른 값을 의도치 않은 값으로 변경할 우려가 있기 때문이라고 한다.(전역 변수를 사용하지 않는 이유와 같은것 같다.)

const sum = () =>{
  setPoint((current)=> current+`);
}

끝으로

또 새로운 언어를 해보니 재밌는것 같다. 지금 하는거를 다하고 리액트 프레임워크인 nextjs도 배워보고 싶다.... 배울건 참 많고 많다 ㅠㅠ