리액트12 [React]React와 JSX. 개요 리액트의 경우 기본적으로 jsx라는 자바스크립트 확장 문법을 사용한다. 물론 해당 문법을 사용하지 않아도 사용가능하긴하지만 리액트가 가진 편리함이 많이 줄어든다. 기본적으로 jsx문법을 활용하기 위해서는 babel이나 tsc같은 트랜스파일러를 필요로 하는데 그렇게 치환 할 경우 React.createElements 등의 함수를 호출하는 코드로 트랜스 파일링 된다. 그리고 createElements는 일정한 구조의 객체를 반환한다. 해당 부분에 대한 간단한 흐름을 코드를 통해서 살펴보자. JSX 본래라면 트랜스파일러 내부를 어느 정도 들여다보아야 정확한 이해가 가능하지만 그럴 경우 관심사가 분산되니 해당 부분은 생략하겠다. 리액트의 바벨 jsx 런타임 관련 코드는 react패키지의 src폴더 내의 j.. 2022. 4. 14. 리액트 포탈과 렌더링 고민 컨텍스트를 포탈로 감싸는게 flux 패턴을 위함일까? 기존의 provider 방식과 무슨 차이를 가질까? 렌더링 측면에서 관련없다. 포탈로 context를 제공한다고 해도 각 상태값이 렌더링 되는건 기존의 context api와 차이가 없다. context을 제공하는데 portal을 활용하는게 아니라 portal을 공통으로 제공하는데 context를 활용하는 측면이 있다. 그 역은 성립하지 않는다. (라고 설명을 들었다.) 개인적으로 영감을 느낀 부분이 조금 있어서 해당 부분을 상태관리에 활용할 방법을 고민해봐야겠다. DOM트리를 벗어나는 설계를 한 이유는 그냥 모바일 특유의 네비게이션 이 목적으로 보인다. UI 특징에 상단 해더와 하단 버튼등 해당 레이아웃을 포탈을 통해서 컨테이너 컴포넌트 내부에서 관.. 2022. 4. 9. [React]React 와 Hooks. 동기 바닐라 js로 전역 store를 만들어보면서 리액트 인터페이스를 참고하면서 상태변화 구독을 자동화할 방법을 찾기 위해서 리액트 소스 코드를 분석을 진행하다가. 방대한 소스코드 분석을 차근차근 진행하면서 그 내용을 포스팅해보는 게 어떨까?라는 생각이 들어서 진행하게 되었다.(개인 학습과 생태계 기여) 개요 이번 파트는 React 패키지를 분석하면서 React Hooks 대한 그러니까 react-dom과 react 중에서 react의 컴포넌트 함수 Hooks에 대한 간략한 분석이다. 저장소 구성 리액트의 경우 자바스크립트 오픈소스 UI 라이브러리로 보통 기본 구성으로 react와 react-dom이라는 패키지를 설치하여서 사용한다. 오픈소스 라이브러리다보니 깃허브에 그 코드 전체가 repo로 공유되어있.. 2022. 3. 30. 생각해보면 리액트는 인강 하나도 안보고 여러 블로그랑 공식문서 보면서 만들어본게 끝이다. 궁금한게 생기거나 하면 검색해서 자료 찾아본거랑 그냥 계속 생각한게 다인데 언제 이 정도로 숙련도가 오른건지 내가 어떻게 공부했는지 모르겠다. 요즘은 리액트 관련된 것들 러닝 커브가 한시간 정도 걸리는거 같은데 많이 만들어 보는게 정답인가? 그래서 다른 사람이 어려워 하는게 이해가 잘 안된다. 테스트 주도 개발이나 엔터 프라이즈 아키텍쳐 같은 부분을 좀 더 잘하고 싶은데 뭘 해야할지 영 감이 안잡히네 2022. 1. 26. 이전 1 2 3 다음
