전체 글34 1-5) [리액트 기초] 컴포넌트 값 전달하기 https://jframework.tistory.com/23 1-4) [리액트 기초] JSX란? JSX 문법 // src/components/Body.js import './Body.css'; const Body = () => { const numA = 1; const numB = 2; const strA = 'Hello'; const strB = 'World'; const boolA = true; const boolB = false; const objA = { a: 1, b: 2, c: 3 }; return ( Body {numA} + {numB} = {num jframework.tistory.com 이어서.. 리액트 앱을 만들다 보면 컴포넌트 간의 값을 전달해야 하는 상황이 발생한다. 리액트에서는 부.. 2024. 1. 24. 1-4) [리액트 기초] JSX란? JSX 문법 // src/components/Body.js import './Body.css'; const Body = () => { const numA = 1; const numB = 2; const strA = 'Hello'; const strB = 'World'; const boolA = true; const boolB = false; const objA = { a: 1, b: 2, c: 3 }; return ( Body {numA} + {numB} = {numA + numB} {strA} + {strB} = {strA + strB} { (boolA || boolB) ? '참입니다.' : '거짓입니다.'} {objA.a} :: {JSON.stringify(objA)} ); } export default Body.. 2024. 1. 24. 1-3) [리액트 기초] 기본 기능 다루기 - 함수 컴포넌트 생성 1-2) [리액트 기초] 기본 기능 다루기 1-1) 리액트 앱 최초 만들기 npx create-reacte-app npm run start http://localhost:3000/ 접속 확인 jframework.tistory.com 일단, 위와 같이 npx create-react-app 을 이용하여 리액트 보일러 플레이트를 생성한다. 아래와 같 jframework.tistory.com 위 내용 이어서 진행... 컴포넌트의 네이밍을 할 때에는 첫 글자는 항상 영어 대문자여야 합니다. 리액트에서 가이드로 제시하는 영역이며, 컴포넌트와 HTML 태그와 구분하기 위해서입니다. import './App.css'; const Header = () => { // 함수형 컴포넌트는 함수명이 대문자로 시작한다. retu.. 2024. 1. 24. 1-2) [리액트 기초] 기본 기능 다루기 1-1) 리액트 앱 최초 만들기 npx create-reacte-app npm run start http://localhost:3000/ 접속 확인 jframework.tistory.com 일단, 위와 같이 npx create-react-app 을 이용하여 리액트 보일러 플레이트를 생성한다. 아래와 같은 소스 구조를 가지고 있다. 아래 파일 제거 src/App.test.js src/logo.svg index.js 오리지널 소스 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVi.. 2024. 1. 23. 이전 1 2 3 4 5 6 7 ··· 9 다음
