리액트분석2 [React]React와 JSX. 개요 리액트의 경우 기본적으로 jsx라는 자바스크립트 확장 문법을 사용한다. 물론 해당 문법을 사용하지 않아도 사용가능하긴하지만 리액트가 가진 편리함이 많이 줄어든다. 기본적으로 jsx문법을 활용하기 위해서는 babel이나 tsc같은 트랜스파일러를 필요로 하는데 그렇게 치환 할 경우 React.createElements 등의 함수를 호출하는 코드로 트랜스 파일링 된다. 그리고 createElements는 일정한 구조의 객체를 반환한다. 해당 부분에 대한 간단한 흐름을 코드를 통해서 살펴보자. JSX 본래라면 트랜스파일러 내부를 어느 정도 들여다보아야 정확한 이해가 가능하지만 그럴 경우 관심사가 분산되니 해당 부분은 생략하겠다. 리액트의 바벨 jsx 런타임 관련 코드는 react패키지의 src폴더 내의 j.. 2022. 4. 14. [React]React 와 Hooks. 동기 바닐라 js로 전역 store를 만들어보면서 리액트 인터페이스를 참고하면서 상태변화 구독을 자동화할 방법을 찾기 위해서 리액트 소스 코드를 분석을 진행하다가. 방대한 소스코드 분석을 차근차근 진행하면서 그 내용을 포스팅해보는 게 어떨까?라는 생각이 들어서 진행하게 되었다.(개인 학습과 생태계 기여) 개요 이번 파트는 React 패키지를 분석하면서 React Hooks 대한 그러니까 react-dom과 react 중에서 react의 컴포넌트 함수 Hooks에 대한 간략한 분석이다. 저장소 구성 리액트의 경우 자바스크립트 오픈소스 UI 라이브러리로 보통 기본 구성으로 react와 react-dom이라는 패키지를 설치하여서 사용한다. 오픈소스 라이브러리다보니 깃허브에 그 코드 전체가 repo로 공유되어있.. 2022. 3. 30. 이전 1 다음
