React6 [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. [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. [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. [React] github pages , React, React-router-dom github pages , React, React-router-dom 문제발생 github pages와 react는 gb-pages라는 라이브러리를 통해 연결을 성공하였다. 하지만 react-router-dom이 연결이 되지를 않았다. 구글링을 해보니 HashRouter 나 기존 BrowserRouter로 해결을 하려 했으나 HashRouter는 로컬에서는 적용이 되지를 않았다. 결국BrowserRouter로 선택하고 적용을 했으나 첫페이지만 나오고 이동시 404오류가 발생하였다. 또다시 구글링을 하니 public 폴더에 404.html 추가와 index.html을 약간 수정할 필요가 있었다. index.html (아래 소스는 MIT license 의 오픈 소스입니다. 프로젝트 포함시 라이센스를 명시해주.. 2023. 1. 8. [React] 회원가입 Input 유효성 체크 하기 - Input 값이 변경될때(onChange) 마다 idCheck 을 실행 시킨다. - idValueCheck 변수 안에 정규식을 할당하고 Input값이 변경될때마다 Input의 Value를 정규식에 넣고 비교한다. - Input의 Value값이 정규식에 맞을 경우 idValue는 true로 바뀐다. 2022. 12. 30. React) Reack Hooks - useState W3Schools Link - https://www.w3schools.com/react/react_hooks.asp React Hooks W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 개요 1. useState란? 2. useState는 어떻게 사용하는가? 1. useState 란? - 이름인 state에서 볼 수 있듯이 리액트에서 사용하는 변수를 관리하는 hook이라고.. 2022. 12. 17. 이전 1 다음
