리액트를 썼을 때 좋은 점은 바뀐 곳만 reRender한다는 것이다. 이 때 reRender하도록 값의 변경을 감지할 수 있도록 하는 것이 useState()이다. useState(n)를 하게 되면 [n, function] 형태의 배열을 반환한다. 자바스크립트 문법중에 배열의 값들을 다른 변수에 할당하는 문법이 있다. 예를 들어 x = [1, 2, 3] 이라는 배열이 있고 1,2,3을 a, b, c라는 변수에 담고 싶다면 a = x[0] 이런식으로 하는 방식도 있지만 const [a, b, c] = x; 이렇게 하는 방식도 있다. 이를 활용하여 useState();를 변수에 바로 할당하면 const [counter, modifier] = React.useState(0); 이런식으로 쓸 수 있다. modi..
취업 준비/React
브라우저가 JSX 문법을 이해할 수 있도록 babel을 임포트 해준다. JSX 문법은 컴포넌트를 만드는 방식인데 HTML 태그를 쓰듯이 만들 수 있게 해주는 것이다. 컴포넌트를 화살표 함수 형태로 만들어주면 필요한 곳에 렌더링 할 수 있다. 이 때 만든 변수의 첫 글자는 꼭 대문자여야 브라우저가 HTML태그로 인식하지 않는다.
일반적인 JS를 사용해서 html 작성 Total clicks: 0 Click me HTML을 먼저 작성하고 거기에 JS를 사용하여 버튼 상호작용을 해서 결과를 업데이트 하는 형식이 JS를 사용한 일반적인 프론트 구성 방식이다. React JS를 임포트해서 작성 HTML을 완성해 놓고 스크립트를 짜는 것이 아닌, 스크립트가 HTML을 완성해 주는 방식이다. 순서가 역전되어 있다. 또한, 리액트를 쓰면 앞에서 4줄에 할 일을 한 줄에 해결할 수 있게 된다. React.createElement("태그", {속성, 이벤트리스너}, "내용"); 이 한줄로 끝나는 것이다.
