본문 바로가기

전체 글70

react.memo ? 왜 필요하죠? react.memo 함수형 컴포넌트를 메모이제이션 해서 이전에 렌더링한 결과를 재사용 하여 불필요한 렌더링을 방지한다, 같은 props로 렌더링 될 때 이전에 렌더링한 결과를 재사용하여 컴포넌트를 다시 렌더링하지 않는다. App 컴포넌트에 있는 count state가 업데이트가 되면 자식컴포넌트인 countview도 업데이트 된다. -> React는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 같이 렌더링 되기 때문 TextCheck 컴포넌트는 리렌더링 될 필요가 없지만 App컴포넌트가 count state를 업데이트 시켜주니 같이 리렌더링! 이럴 경우 연산의 낭비가 발생한다, 굳이 자신과 관련없는 업데이트로 인해서 성능상의 문제가 생길 수 있다. 그렇다면 업데이트 조건을 걸어서 count가 변경될 때만.. 2024. 2. 1.
프로젝트로 느낀 window.location.href와 origin의 차이 프로젝트를 진행하던 중 링크공유 및 카카오 공유하기 기능을 맡게 되었다. 링크 공유하기는 window.location.href를 사용해서 현재 url을 복사하면 된다는 아주 간단한 생각을 했다. href를 사용하면 현재 페이지의 전체 URL을 문자열로 반환하며 웹브라우저의 주소 표시줄에 표시되는 것과 동일한 주소가 나온다. const ShareBtn = () => { const [isToast, setIsToast] = useState(false) const url = window.location.href const shareToFacebook = () => { const sharedLink = encodeURIComponent(url) window.open(`http://www.facebook.com/.. 2024. 1. 30.
React children 컴포넌트의 자식들을 값으로 받는 Prop function Button({text}){ return {text} } export default Button; button 태그에 {text}라는 prop를 전달하는 컴포넌트를 만듦 import Button from './Button'; function App (){ return ( ) } export default App 를 출력할 수 있다. 단순히 보여주는 값을 다룰 때는 prop를 만드는 것 보다는 children을 활용하는 것이 직관적으로 도움이 된다. function Button({children}){ return {children} } export default Button; Button 컴포넌트에 prop을 childern으로 변경해주고 impor.. 2024. 1. 18.
01.18 window.innerWidth 페이지에 질문하기 버튼 컴포넌트를 반응형으로 만들게 되면서 궁금했던점 컴포넌트는 재사용 하는 것이 좋으니 useState를 활용한 동적인 변경 or 스타일드 컴포넌트의 media쿼리를 활용해서 만들기를 고민하다 둘다 해보기로 결정! 버튼이 desktop화면일 때는 (1200px이상) 질문 작성하기가 보이기! 모바일 화면( max-width: 767px) 일때는 질문 작성만 보이게 만들기 처음에는 스타일드 컴포넌트로만 만들수 있을 것 같아서 뚝딱뚝딱 해본 결과는 이렇게 잘려서 나왔다. @media (max-width: 767px) { width: 120px; height: 54px; white-space: nowrap; overflow: hidden; } white-space : nowrap 를 통해서 줄.. 2024. 1. 18.

티스토리툴바