본문 바로가기

React

 (22)
[React] React와 Vue의 CSS 모듈 사용 차이점 1. 파일 명명 규칙React: [name].module.cssVue: [name].module.css 또는  3. 클래스 사용 방법React: Vue: 4. 인라인 스타일 모듈React: 지원하지 않음Vue: 5. 전역 스타일과의 혼용React: 별도의 파일로 관리Vue: 같은 컴포넌트 파일 내에서 모듈 스타일과 전역 스타일 동시 사용 가능 6. 스코프 설정React: 자동으로 모든 스타일이 모듈화됨Vue: module 속성을 사용하여 명시적으로 스코프 지정 7. 동적 클래스 바인딩React: JavaScript 객체를 사용하여 조건부 클래스 적용Vue: v-bind 디렉티브와 객체 문법을 사용하여 더 간편한 동적 클래스 바인딩 제공
[React] 동적 컴포넌트 적용하기 ( 동적으로 태그 및 컴포넌트를 자식에 적용 ) 자식 컴포넌트에서 사용할 태그 혹은 컴포넌트가기본 HTML 태그일 때는  buttonContainer='문자열 태그명' 으로 속성 값을 주고사용자 정의 컴포넌트를 넘겨줄 때는(예를 들어 Menu 라는 컴포넌트가 있다면)  buttonContainer={ Menu }로 자식 컴포넌트에 전달하면 됩니다  부모 컴포넌트1 {tabContent}   자식 컴포넌트2export default function Tabs({children, buttons, buttonContainer}) { const ButtonContainer = buttonContainer // 사용자 컴포넌트로 인식되게 첫글자가 대문자인 변수 저장 return ( 로 랜더링 되게 됨 {buttons} ..
[React] props children VS vue slot 1. react 의  props.children사용자 정의 컴포넌트 사용시 속성을 주지 않아도 항상 props 로 받을 수 있는 속성이다컴포넌트 합성: 컴포넌트가 다른 컴포넌트나 내용을 감싸서 컴포넌트를 만드는 것을 컴포넌트 합성이라고 하는데 부모 컴포넌트가 자식 요소를 알 수 없을 때 유용합니다.유연성: 컴포넌트를 더 유연하고 재사용 가능하게 만듭니다.다양한 타입: 문자열, 숫자, 엘리먼트, 배열 등 다양한 타입이 될 수 있습니다.   import classes from './Modal.module.css';function Modal({ children, onClose }) { return ( e.stopPropagation()}> {children} ..
[React] Vue 에는 없는 React 만의 표현들 1) JSX안에서는 항상 최상위 태그는 1개여야만 한다. 불필요한 DOM 노드를 만들기 싫다면function App() { return ( // 혹은 단축표현인 을 써도 된다 );}  2) JSX 에서 inline 스타일로  css 를 줄 때 속성명이 text-align 처럼 하이픈(  -  ) 이 있다면 textAlign 캐멀케이스로 바꿀 것. 자바스크립트에서 변수, 속성은 케밥 표기법을 쓸 수 없기 때문이다하지만 inline 스타일 css 는 쓰지 말 것function Post(props) { return ( {props.author} {props.content} );}export ..
[React] 자식 컴포넌트에 Prop 전달하는 방법 import imageA from './assets/imageA.png';// 나머지 이미지 import 생략const LIST = [ { image: imageA, title: 'REACT', description: 'REACTREACTREACT.', }, { image: imageB, title: 'NEXT', description: 'NEXTNEXTNEXT.', }, { image: imageC, title: 'VUE', description: 'VUEVUEVUE.', }, { image: imageD, title: 'NUXT', description: 'NUXTNUXTNUXT.', }..
[React] JSX란? function Header() { return ( React Essentials Fundamental React concepts you will need for almost any app you are going to build! )}function App() { return ( Time to get started! );}JSX는 JavaScript XML의 약자로, React에서 사용되는 JavaScript의 확장 문법입니다. ( return() 안의 html 태그들 )HTML과 유사한 구문: JSX는 JavaScript 코드 안에서 ..

티스토리툴바