React (57) 썸네일형 리스트형 [React] children Button.js 를 생성후 다음 코드를 입력한 뒤, function Button({ text }) { // Button 태그 안, text prop 을 보여주는 함수 return {text} } export default Button; App.js 에 text 에 문자열을 할당해주면, import Button from "./Button"; import Dice from "./Dice"; function App() { return ( ); } export default App; 이처럼 버튼을 확인할 수 있음. [children] JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다... [React] Props [Props] Dice 컴포넌트의 color 속성을 blue 로 지정해보면, import Dice from "./Dice"; function App() { return ( ); } export default App; 다음처럼 개발자 도구 Element 에서 color = "blue" 의 흔적을 찾아볼 수가 없다. 이는 HTML 로 만들어진 속성이 아니기 때문인데, 개발자 도구의 component 에서 속성값을 확인하면, 이처럼 color = "blue" 의 props 를 확인할 수 있는데, 리액트에서는 component 에 지정한 속성을 props 라고 한다. props는 component 에 지정된 모든 속성을 가르키는데, 따라서 각각의 속성은 prop 이라고한다. [component prop 사용하기.. [React] component/ element element 에 태그를 직접 할당한 다음 코드를 실행하면, import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); const element = 안녕 리액트! root.render(element); 아무런 오류 없이 잘 동작하는 것을 확인할 수 있음. [컴포넌트 및 앨리먼트] 다음과 같이 Hello 함수를 element 안에 함수 'Hello' 이름을 가진 태그를 사용할 수 있음. 여기서 Hello 함수를 react component 라고 함. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createR.. [React] 가위바위보(간단버전 2) import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); const WINS = { rock: 'scissor', scissor: 'papaer', paper: 'rock', }; function getResult(left, right) { if (WINS[left] === right) return '승리'; else if (left === WINS[right]) return '패배'; else return '무승부'; } function handleClick() { console.log('가위바위보!'); }; const me = 'rock'; const other =.. [React] JSX 에서 JavaScript 사용하기 [값 할당] 다음처럼 변수 product 에 '맥북' 을 할당하고, 태그 안에 {} 로 감싸서 할당할 수 있다. import ReactDOM from 'react-dom/client'; const product = '맥북'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 나만의 {product} 주문하기 ); [toUpperCase 메소드] 다음과 같이, 변수이름에 영어를 할당해 줄 수 있는데 import ReactDOM from 'react-dom/client'; const product = 'Macbook'; const root = ReactDOM.createRoot(document.getElementBy.. [React] Fragment 태그 [Fragment 태그] import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); 위의 코드를 실행하면 다음처럼 오류가 발생하는데, JSX 요소들은 반드시 하나의 태그로 감싸주어야 한다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! , ); 이런식으로 태그로 감싸주거나, import { Fragment } from 'react'; import R.. [React] JSX JSX JavaScript와 HTML 을 섞어서 쓸 수 있는, JavaScript의 확장된 문법 1. JSX 문법에서는 HTML 을 사용할 때, class 대신 className 으로 작성해주어야한다. JavaScript의 class 와 HTML 의 class 가 다르기 때문에, 이런식으로 작성해야함. 2. HTML 속성에서의 for 를 사용하고싶다면, htmlFor 으로 작성해주어야한다. JavaScript의 반복문 for 와 HTML속성의 for 가 다르기 때문에, 이름 이런식으로 작성해야함. 3. 이벤트 핸들러는 두번째 단어부터 대문자 (카멜케이스) 로 작성 여러 단어가 조합된 속성명들은 카멜케이스로 작성해야 한다. [React] 인덱스 파일에서 하는 일 index.js import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); // react 에서는 render 메소드로 화면을 그림 첫번째 아규먼트 값으로 요소를 만들고, 두번째 아규먼트 값 사이에 그 값을 넣어줌 안녕 리액트! 이런 형태의 값이 나오게 됨. index.html 리액트가 실행되면 브라우저는 이 파일을 실행하며, root 값은 이 파일에서 확인할 수 있음. 이전 1 ··· 4 5 6 7 8 다음
