분류 전체보기18 [typescript] custom hook 과 typescript 개요 회원가입 기능을 만드는 도중 닉네임과 아이디, 회원가입의 값을 다루는 기능이의 코드가 중복된다는 점을 알고 custom hook을 사용하여 구현하였다. 확장자를 ts로 설정하다보니 타입스크립트를 적용하게 되었는데 CustomHook 작성 중 오류가 발생하였다. 에러(1) - 이벤트리스터에 타입을 지정해 줘야해서 ChangeEvent 라는 타입을 지정해 주었고 에러가 발생하였다. - 에러를 해석해 보면 'value' 속성이 'EventTarget & Element' 유형에 없습니다. 로 해석할 수 있다. 해결(1) - 위 사진처럼 parameter 의 타입과 리스너의 타입을 지정해주었더니 해결되었다. 에러(2) - 그 이후에 에러가 하나 더 발생하였는데 custom hook을 import해서 사용하는.. 2023. 3. 6. [Typescript] Type '{ children: never[]; }' has no properties in common with type 'IntrinsicAttributes'. 에러 Components 안에 img태그를 넣으려고 하다가 아래사진과 같은 에러가 나왔다. - components안에 들어갈 요소의 타입을 정해주지 않아 발생한 오류 같았다. Components 구성 - 상위 Components - 하위 Components 해결 방안 하위 Components의 children을 넣고 타입을 정의해 주었다. - 하위 Components ! 타입 설정시 ReactNode, ReactElement 중 아무거나 해도 상관없다. 좀 더 정확하게 설정해주고 싶다면 원시타입은 허용하지 않는 ReactElement가 좀 더 정확하다고 할 수 있다. 2023. 2. 25. [React] styled-components props로 유동적인 스타일 적용 공식 문서 https://styled-components.com/docs/basics#passed-props styled-components: Basics Get Started with styled-components basics. styled-components.com - 구현하고 싶은 화면 - 구현 코드 - 구현 순서 1. UnderLIne components에 translateX라는 작명으로 useState에서 할당한 값("-101%)을 넣습니다. 2. props parameter 에서 props.translateX 의 변수를 가져와 넣습니다. 3. UnderLine 의 부모 styled-components인 MenuItem 스타일에 overflow : hideen 속성을 넣어 UnderLine을 .. 2023. 2. 25. 함수형 프로그래밍이란? 함수형 프로그래밍은 프로그래밍의 패러다임입니다. 프로그래밍에 대한 선언적 접근 방식으로, 프로그램이 어떻게 달성해야 하는가 보다 프로그램이 달성해야 하는 것에 목적이 있습니다. 예시 function test(a,b){ return a+b } 잘못된 예시 function test(a,b){ return a+b+c } 함수형 프로그래밍의 원리 - 위에 예시 처럼 주어진 입력에 대해 함수가 항상 동일한 출력을 반환하여야 합니다. - 사이드이펙트가 없어야 합니다. 사이트 이펙트란 실행 중인 함수 외부에서 함수에 영향을 주는 것들을 말합니다. 사이드이펙트가 없어지면 함수의 동작에 대한 추론하기가 쉽고 버그가 줄어듭니다. - 객체 지향 프로그래밍과는 달리 개체에서 다른 개체로 상속하는 프로그래밍과는 달리 새로운 함.. 2023. 2. 7. [React] styled-components 란? styled-componets 란? - 컴포넌트 기반 방식으로 css스타일을 작성하고 관리할 수 있는 React 라이브러리입니다. 구성 요소 내에서 직접 스타일하며 의도하지 않은 스타일이 다른 구성 요소로 유출 되는 위험을 제거합니다. // 설치 $ npm install --save styled-components import styled from 'styled-componets' const DivStyle = styled.div` width : 100px; height : 100px; ` const TestContainer = ()=>{ return ( 스타일컴포넌트 ) } export default TestContainer styled-components의 장점 - 정의된 스타일은 정의된 요소에만 적.. 2023. 2. 6. [Typescript] ReactNode와 ReactElement (feat. ReactChild) ReactNode 와 ReactElement (+ ReactChild ) 자식 요소를 감싸는 래퍼컴포넌트를 작성하다 자식요소의 타입을 정하라는 표시가 보였다. 검색해서 찾아보니 ReactNode, ReactChild, ReactElement 3가지 중 하나의 타입을 적용해야 할 것 같았다. 1. ReactNode ReactNode는 ReactElement뿐만 아니라, string, number, boolean 등 원시타입까지 포함하고 있다. 즉 ReactNode는 리액트 애플리케이션에서 보여지는 모든 것들 이라고 볼 수 있다. 2. ReactElement (+JSX.Element 도 사용 가능하다) 커서를 올려보면 위 사진처럼 나오는데 이게 무슨 뜻일까 검색을 해보니 원시타입은 허용하지 않는 jsx 요소.. 2023. 2. 3. [React] useCallback은 언제 사용하면 좋을까? useCallback useCallback은 콜백함수를 메모라이제이션을 하며 반환하는 함수 입니다. 사용하는 이유 중 가장 큰 이유는 불필요한 재렌더링을 피함으로써 성능을 최적화 하는데 사용합니다. //useCallback을 사용하지 않을때 import React, { useState } from 'react'; const Component = () => { const [value, setValue] = useState("") const onChangeValue = ((e) => { setValue(e.target.value); }) return ( ); }; React에서는 구성 요소가 렌더링될 때마다 이전 렌더링과 비교하여 업데이트가 필요한지 여부를 결정합니다. 값이 변경되면 구성 요소.. 2023. 2. 2. [NextJs] Link와 router.push 개요 nextjs를 공부하다보니 페이지를 이동하는 방법으로 Link, router.push()를 알게 되었습니다. 무슨 차이가 있는지 한번 찾아보았고 제 방식대로 정리를 해보았습니다. 정확한 정의를 알고 싶다면 Link에 대한 내용 next/link | Next.js Enable client-side transitions between routes with the built-in Link component. nextjs.org router에 대한 내용 next/router | Next.js Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook. next.. 2023. 2. 2. 이전 1 2 3 다음
