react3 [Styled-component] media query 사용하기 styled-component에서 media query 사용하기 const Menu = styled.a` display: flex; align-items:center; color: black; font-weight: bold; @media screen and (max-width: 480px) { display: none; } ` 위와 같이 styled 속에 @media query를 작성하면 된다. 2022. 6. 21. [React] Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js 해결 개츠비 개발 도중 발생한 에러 나의 경우는 1. 대문자로 시작하지 않음 2. export default를 작성하지 않음. 이 두 가지가 문제였다. 1. const test 는 const Test 와 같이 작성되어야 한다. const test = () => { //에러 return ( This is a test page! ) } ---------------------------------------- // 올바른 코드 const Test = () => { return ( This is a test page! ) } 2. 위 코드에서는 export default가 없다. 아래와 같이 수정해야 한다. const Test = () => { return ( This is a test page! ) } export.. 2022. 6. 19. styled-components란? styled-components란? styled-coponents는 CSS-in-JS 스타일링을 위한 프레임워크이다. 대개 style을 특정 요소에 주고자 할 때 css, scss 등의 스타일 속성 파일에서 html tag나, id, class 등의 선택자를 통해 접근한다. 하지만 이런 외부 파일 없이 동일한 컴포넌트에서 css와 같은 문법으로 스타일을 지정하는 것을 styled-components라고 부른다. 장점 styled-components 라이브러리를 사용해 보다 자유로운 리액트 컴포넌트를 만들 수 있다. 모바일을 지원한다(React Native에 사용) 스타일 스코프 No-class policy styled-components는 class에서 props사용하는 것을 권장. Wrapper div.. 2022. 6. 8. 이전 1 다음