JSX

React

[React] Props를 통해 Component로 데이터 전달

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 Props를 이용하면 된다.React에서 데이터(Props)는 상위 컴포넌트에서 아래 컴포넌트로 흐른다.  Props를 전달하는 방법은 두 가지1. 객체형태로 전달App.jsximport "./App.css";import Button from "./components/Button";function App() { const buttonProps = { text: "메일", color: "red", }; return ( );}export default App; Button.jsxconst Button = (props) => { console.log(props); // {text: '메일', co..

React

[React] Component & JSX

ComponentJavaScript에서 html을 리턴하는 함수함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다. vite를 통해 생성한 프로젝트를 실행시켰을 때 원리를 간단히 보면 1. index.html파일에서 main.jsx실행 2. main.jsx에서 App Component 렌더링 3. App Component(함수)는 html을 리턴   JSXJSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)3. 모든 태그는 닫혀있어야 한다.4. 최상위 ..

개발새발
'JSX' 태그의 글 목록