[REACT] Props 사용법 컴포넌트에 값 전달하기 Propsconst Button = (props) => { console.log(props); return {props.text} };export default Button;function App() { return ( );}export default App; 만약에 color가 없을때 디폴트 값을 설정하고 싶다면? 구조분해할당 방법 적용const Button = ({text, color = "black"}) => { return ( {text} - {color} );};export default Button; Spread 연산자를 이.. 나의 주니어 개발 일기/REACT 2025. 4. 25. 14:05
[REACT] CSS 적용법 CSS 적용법import "./Main.css";//JSX 주의사항//1. 중괄호 내부에는 자바스크립트 표현식만 가능//2. 숫자, 문자열, 배열 값만 렌더링 된다.const Main = () => { const user = { name: "윤주영", isLogin: true, }; if(user.isLogin){ return 로그아웃 } else { return 로그인 }}export default Main;//Main.css.logout{ background-color: red; border-bottom: green;} 나의 주니어 개발 일기/REACT 2025. 4. 25. 14:02
[REACT] Main 사용법 Main 사용법//V1const Main = () => { const user = { name: "윤주영", isLogin: true, }; return ( {user.isLogin ? (로그아웃) : (로그인)} );}//V2const Main = () => { const user = { name: "윤주영", isLogin: true, }; if(user.isLogin){ return 로그아웃 } else { return 로그인 }} 나의 주니어 개발 일기/REACT 2025. 4. 25. 14:01
[REACT] JSX 사용법 JSX 사용법//JSX 주의사항//1. 중괄호 내부에는 자바스크립트 표현식만 가능//2. 숫자, 문자열, 배열 값만 렌더링 된다.const Main = () => { const number = 10; return ( main {number % 2 === 0 ? "짝수":"홀수"} );}const Main = () => { const user = { name: "윤주영", isLogin: true, }; return ( {user.isLogin ? (로그아웃) : (로그인)} );} 나의 주니어 개발 일기/REACT 2025. 4. 25. 14:00
