전체 글 (291) 썸네일형 리스트형 State State 컴포넌트 내부에서 바뀔 수 있는 값 UI를 바꾸기 위해서 사용. 리액트에서 변경되야 하는 값은 반드시 State로 선언해야 함. App.jsx import {useState} from 'react'; import "./App.css"; function App() { const [name, setName] = useState('김할아버지'); return ( {name} 클릭 ); } export default App; App.jsx import {useState} from 'react'; import "./App.css"; function App() { const [fruit, setFruit] = useState(""); return ( 과일 : {fruit} ); } export defau.. JSX, Props 📌 JSX Javascript + XML JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그림 객체를 변수로 빼 재사용성 가능 import React from 'react' export default function App() { const number = 1; const pTagStyle = { color: "red", } return( 안녕하세요 리액트입니다. {/* 주석을 사용하는 방법입니다. */} {/* 삼항 연산자를 사용해볼게요! */} { number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다.' } ) } 📌 Props 부모에서 자식으로 값을 내려줌(rendering) , 단방향 props는 반드시 읽기 전용으로 취급하며.. React Component React Component UI를 재사용이 가능한 개별적인 여러 조각으로 나눔 📌 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return hello } 📌클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 📌 JSX 자바스크립트의 확장 문법이며 XML과 비슷 📌 { } 자바스크립트 표현식을 JSX 내부에 작성하려면 {}로.. 이전 1 ··· 17 18 19 20 21 22 23 ··· 97 다음
