DEV/react
-
React 시작하기 6. Multiple Input StateDEV/react 2024. 1. 3. 16:16
App.js import React from 'react'; import InputSample from '../src/InputSample'; function App() { return ( ); } export default App; InputSample.js import React, { useState } from "react"; function InputSample() { // {name, nickname} 객체로 초기화, 초기화는 ''로... const [inputs, SetInputs] = useState({ name: '', nickname: '' }); // 비구조화 할당을 통해 값 추출 const { name, nickname } = inputs; // 이벤트(e)로 해당 target의 va..
-
React 시작하기 5. Input StateDEV/react 2024. 1. 3. 15:19
App.js import React from 'react'; import InputSample from './inputSample'; function App() { return ( ); } export default App; InputSample.js import React, { useState } from "react"; function InputSample() { // useState => text/SetText const [text, SetText] = useState(''); // 이벤트(e)로 해당 target의 value 불러오기 const onChange = (e) => { SetText(e.target.value); }; // Setter 함수로 값 초기화 const onReset = ()..
-
React 시작하기 4. useStateDEV/react 2024. 1. 3. 14:55
App.js import React from 'react'; import Counter from './Counter'; // Counter import function App() { return ( {/* Counter 불러오기 */} ); } export default App; Counter.js import React, { useState } from 'react'; // useState : 컴포넌트의 동적인 값 관리 function Counter() { /** * useState 함수는 상태의 기본값을 파라미터로 넣어서 호출 * useState의 반환값 [0] : 현재 상태 * useState의 반환값 [1] : Setter 함수 */ const [Number, setNumber] = useStat..
-
React 시작하기 3. 조건부 렌더링DEV/react 2023. 12. 22. 16:51
App.js import React from 'react'; import Sample from './Sample'; // Sample component 불러오기 function App() { return ( // true는 생략하면 true임, 하단 두 은 같은 결과를 출력함. // ); } export default App; Sample.js // 컴포넌트 생성을 위해 React Import import React from 'react'; /** * [Props sample] * @param {*} props 전달 데이터 * @returns */ function Sample({ name, isSpecial }) { const style = { border: '5px solid red', padding:..
-
React 시작하기 2. PropsDEV/react 2023. 12. 15. 18:48
Props Properties는 component에 데이터를 전달하기 위해 사용됩니다. 1. src/App.js import React from 'react'; import Sample from './Sample'; function App() { return ( ); } export default App; 2. src/Sample.js // 컴포넌트 생성을 위해 React Import import React from 'react'; /** * [Props sample] * @param {*} props 전달 데이터 * @returns */ function Sample(props) { return {props.text} {props.name} sample component!! } // 컴포넌트 내보내기 (..