React14 리코일, Selectors atoms, selectors를 입력으로 받아들이는 순수 함수다. 상위 atoms, selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다. const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = get(fontSizeState); // atom에 의존성이 생김 const unit = 'px'; return `${fontSize}${unit}`; }, }); get속성은 계산될 함수다. 전달되는 get 인자를 통해 atoms와 다른 sele.. 2023. 3. 30. 리코일, Atoms Atoms Atoms는 상태의 단위이며, 업데이트와 구독이 가능. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영해 재렌더링된다. atoms는 런타임에서 생성될 수도 있다. Atoms는 리액트의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. const fontSizeState = atom({ key: 'fontSizeState', default: 14, }) Atoms는 디버깅, 지속성 및 모든 atoms의 map을 볼 수 있는 특정 고급 API에 사용되는 고유한 키가 필요하다. 두개의 atom이 같은 키를 갖는 것은 오류이기 때문에 키 값은 전역적으로 고유하도록 해야한다. 리액트 컴포넌트의 상태처럼 기본.. 2023. 3. 30. Next.js 기초편: UI Component 구축하기 사용자 인터페이스는 구성 요소라고 하는 더 작은 빌딩 블록으로 나눌 수 있습니다. 컴포넌트를 사용하면 재사용가능한 코드 조각을 만들 수 있다. 컴포넌트를 레고 블럭으로 생각한다면 이러한 개별 브릭을 결합해 더 큰 구조물을 만들 수 있습니다. UI의 일부를 업데이트해야하는 경우 특정 컴포넌트 또는 브릭을 업데이트 할 수 있습니다. 이 모듈성은 애플리케이션의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 삭제, 업데이트할 수 있기 때문에 코드가 성장함에 따라 유지 관리가 더 쉬워집니다. 리액트 컴포넌트에 대한 좋은 점은 자바스크립트라는 점입니다. 자바스크립트 관점에서 리액트 컴포넌트를 작성하는 방법을 살펴보겠습니다.: 컴포넌트 만들기 리액트에서 컴포넌트는 함수입니다. 스크립트 태그 안에 header라.. 2022. 5. 22. Next.js 기초편: 리액트 시작하기 프로젝트에서 React를 사용하려면 unpkg.com 이라는 외부 웹사이트에서 2개의 React 스크립트를 로드하면 됩니다. react 는 핵심 React 라이브러리입니다. react-dom 은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다. 일반 JavsScript로 DOM을 직접 조작하는 대신 react-dom의 ReactDOM.render() 메소드를 사용해서 React에 #app 요소 내에서 태그를 렌더링 하도록 지시할 수 있다. 하지만 해당 코드로 실행하면 이런 에러를 만난다. JSX가 뭔가요? JSX는 친숙한 HTML과 유사한 구문으로 UI를 설명할 수 있는 자바스크립트용 구문 확장이다. JSX의 좋은 점은 다음 세 가지 규칙을 제외하고는 HTML 및 Jav.. 2022. 5. 22. 이전 1 2 3 4 다음
