[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
REACT는 왜 사용할까? REACT는 왜 사용할까? 자바스크립트만으로 규모가 큰 애플케이션을 만들 수 있는 시대가 왔음. 그러나 특별한 도구 없이 순수하게 자바스크립트만 관리하기에는 제한이 있음. 그래서 angular, vue.js .. 프레임워크 가 등장 해당 프레임워크 들은 MVC, MVVM, MVW 등과 같은 여러 구조를 지니고 있으며 공통점은 M과 V가 있다는것 여기서 핵심 예를 들어 뷰단에서 JSON 형식이 데이터가 존재하며 일부값이 변경이 됬다는 조건에서, 어떤 데이터가 변할 때마다 변경 규칙을 정하여 변화를 줄지 고민하는것이 아니라 기존 뷰를 날려버리고 처음부터 새로 랜더링 하는방식이 REACT 방식이다. 이는 브라우저 단에서 CPU점유율을 크게 증가시키고, 랜더링 끊김현상이 발생할꺼같지만 최대한 성능을 아끼고 편안.. 나의 주니어 개발 일기/REACT 2022. 10. 26. 11:32
