React

useState를 통해 컴포넌트에서 바뀌는 값 관리

useState를 통해 컴포넌트에서 바뀌는 값 관리 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다 리액트 16.8에서는 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다 useState라는 함수가 바로 리액트의 Hooks 중 하나이다 Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; App.js import React from 'react'; import Counter from './Counter'; function App() { return ( ); } export default App; 이벤트..

2023. 8. 16. 16:06

React

React 인라인 스타일

인라인 스타일은 HTML에서 태그 안에 스타일 속성을 추가할 때 사용했다 마찬가지로 리액트에서 컴포넌트/일반 태그 안에 스타일 속성을 줄 수 있다 단, JSX 문법에 의해서 HTML에 적용하던 방법과는 다르다 style에 대한 value는 객체 형태이다 CSS 속성 이름은 카멜 케이스로 한다 import React from "react"; import MyHeader from "./MyHeader"; function App() { let name = "리액트" const style = { App: { backgroundColor: "black", }, h1: { color: "red", }, bold_text: { color: "green", } } return ( 안녕 {name} React.js );..

2023. 8. 12. 10:24

React

React Fragment

Fragment? 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다 리액트를 사용하기 위한 문법인 JSX를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다 import React from "react"; function App() { return ( sdf{name} ); } export default App; 처럼 React를 import 해 준 뒤, 로 감싸 주면 된다 단축 문법 대신 이렇게 써도 된다

2023. 8. 11. 14:22