madisonrubylee madisonrubylee

Text Component 만들기 Generic Prop에 알맞는 컴포넌트만을 받는 방법 * React.ComponentPropsWithoutRef 을 사용하여 타입을 확장하면 제네릭으로 컴포넌트를 받았을때 유효한 속성을 작성하기 쉬워집니다. ㄴ ComponentPropsWithRef : ref를 포함한 속성들을 정의할 수 있습니다. ComponentPropsWithoutRef: ref를 제외한 속성을 정의할 수있습니다. (The ComponentPropsWithoutRef type can be used to grab all the native attributes of an HTML element as the props type of your component. ) 관련있는 props를 받기위해 컴포넌트..

Polymorphism Polymorphism (다형성) 은 객체지향 프로그램의 코어 컨셉중 하나입니다. 자바스크립트에서 다형성은 다른 signatures(input and output of functions or methods)을 가지는 동일한 함수가 여러번 호출되는것을 뜻합니다. Polymorphic React Component 많이 사용하는 Chakra UI, MUI가 대표적인 polymrphic component를 구현한 오픈소스 라이브러리 입니다. 리액트컴포넌트에서 다형성을 구현하는 간단한 방법은 아래와 같습니다. 컴포넌트는 다형성을 prop으로 받아야합니다. 컴포넌트는 전달받은 항목을 element 타입으로 렌더링 해야합니다. 타입스크립트를 사용한다면, 컴포넌트는 전달받은 element 타입/..

훅스는 컴포넌트의 영역 안에서만 작동한다 ( Only Call Hooks from React Functions) 리액트 컴포넌트 내부에서만 훅스를 호출해야 합니다. 마찬가지로 커스텀 훅도 결국에는 컴포넌트에 추가되야합니다. 기능을 여러 훅으로 나누기 훅스는 순서대로 호출되기 때문에 각 훅을 작게 유지하면 좋습니다. 최상위 수준에서만 훅을 호출해야한다. ( Only Call Hooks at the Top Level) 조건문이나 루프 또는 중첩된 함수에서 훅을 사용해서는 안됩니다. 비동기 작업도 훅 안에서 실행시켜야 합니다. cra를 사용한다면 eslint-plugin-react-hooks라는 플러그인을 사용하면 에러를 잡을수 있습니다. Hooks can call other Hooks Never call a..

Memoization 이란? Memoization이란 동일한 입력이 들어와서 기존에 수행된 연산이 반복될때, 중복된 결과를 저장하고 캐시된 결과를 반환하는 프로그래밍 최적화 기법입니다. 중복 연산을 피하여 성능을 최적화 할수있습니다. Hooks는 리액트 16.8 버전에서 새로 추가된 기능입니다. Hooks는 함수 컴포넌트에서도 리액트의 상태와 라이프사이클 특징들을 사용할수 있게 해줍니다. useMemo - useMemo를 사용하지 않았을때 각 렌더링마다 새 배열이 선언되기 때문에 자바스크립트는 filterItems에 어떤 변화가 있다고 추측합니다. 따라서, 각 렌더링 과정마다 console.log('render')가 invoke ( 간접호출 : 어딘가에 레퍼런스를 유지한 다음 호출) 됩니다. 이러한 불필..

스토어 생성 후 컴포넌트에서 리덕스 스토어를 사용할수 있도록 Provider 컴포넌트로 감싸준다. The component makes the Redux store available to any nested components that need to access the Redux store. Since any React component in a React Redux app can be connected to the store, most applications will render a at the top level, with the entire app’s component tree inside of it. 컴포넌트를 리덕스와 연동하려면 react-redux에서 제공하는 connet()를 사용해야한다. Th..

라이프사이클 생명주기 메소드는 컴포넌트가 어떤 단계에 진입할때 자동으로 호출되는 메소드이다. - defaultProps : 컴포넌트 클래스 자체 내에서 프로퍼티로서 정의. this.props의 기본값을 지정할 수 있게 된다. 이는 컴포넌트가 생성되기 전이나 부모로부터 속성이 전달될 때 실행된다. 1) Mounting 단계 : DOM이 생성되고 브라우저에 나타나는 단계 constructor() : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 . 메서드를 바인딩하거나 state를 초기화 하는 작업이 없다면, 생성자를 구현하지 않아도 된다. React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 회출된다. React.Component를 상속한 컴포넌트의 생성자를 구현할때는 super(pro..

리액트 : Vue.js처럼 SPA 웹앱을 만들수 있는 자바스크립트 라이브러리이다. 컴포넌트 기반이며 가상돔을 이용하여 DOM의 변화를 최 소화시켜 속도가 빠르다는것은 동일하지만, 리액트는 하나의 템플릿으로 구성된것이 아니라 JSX 문법을 사용하여 자바스크립트를 작성하는것처럼 리액트를 사용할 수 있다. JSX : JSX( JavaScriptXml) 을 사용하면 자바스크립트와 HTML태그를 합쳐서 React element와 기능을 작성할수있다. 리액트를 사용하면서 필수로 사용해야하는 문법은 아니지만, 같이 사용되는걸 권장한다. 리액트 웹앱을 만들때는 브라우저가 JSX를 인식할수있도록 자바스크립트로 변환시켜야한다. 두가지 방법을 살펴보자. 1) Node.js를 이용해 개발환경을 구축한다. 빌드가 수행될때마다 ..