props를 객체로 정의 하고 Spread operator(...)를 사용하여 컴포넌트에 전달할 수 있습니다. // can be rewritten as const props = { title: 'React', label: 'library' } 조건에 따라서 추가하거나 제거 하려면 삼항 연산자(a?b:c) 또는 if-else 문을 사용 예제1. //using ternary operator const App = () => { const [isShowDescription, setIsShowDescription] = useState(false); const customProps = { label: "Hello", size: 100 } return ( ); } export default App; 예제2. //us..

삼항 연산자 사용 function Link({ href, target, children }) { return ( {children} ); } Spread 연산자 사용 const props = { title: 'bar' }; function Link({ href, target, children }) { if (target === '_blank') { props.rel = 'noopener'; } return {children}; } 객체 속성 조건문 function Link({ href, target, children }) { const condition = target === '_blank'; const props = { href, // using the ternary operator: ...( cond..

삼항 연산자 조건문 function App() { const [mood] = React.useState("happy"); const greet = () => alert("Hi there! :)"); return ( Say hi ); } if문 function App() { let disabled = true; const [mood] = React.useState("happy"); const greet = () => alert("Hi there! :)"); if ("happy" === mood) { disabled = undefined; } return ( Say hi ); } Spread 연산자 function App() { let required = false; let type = "password";..

Create React App(CRA) 에서 이모션 사용 시 아래와 같이 매번 jsx pragma 선언이 필요합니다. 이 코드를 제거하기 위해서는 바벨 설정이 필요합니다. /** @jsx */ import { css } from '@emotion/react' 하지만 기본적으로 CRA는 바벨 사용자 설정을 막아놓았습니다. 다음의 명령어를 수행하게 되면 숨겨져 있던 모든 설정들(All configurations, webpack, babel 설정 파일 등)과 패키지들이 가지는 의존성을 볼 수 있습니다. yarn eject 주의할 점은, 한번 eject를 수행하게 되면 이전 상태로 되돌아 갈 수 없습니다. craco는 Create React App Configuration Override의 약자로 eject를 ..