석봉노트 석봉노트

전체 글

• React 시작하기 8. Array Rendering

  DEV/react 2024. 1. 3. 17:35

  App.js import React from 'react'; import UserList from './UserList'; function App() { return ( ); } export default App; UserList.js import React from "react"; // * 한개의 파일 내에서 여러 Component를 선언해도 문제 X // User 정보 출력 function User({ user }) { return ( {user.username} ({user.email}) ) } // User 리스트를 모두 출력 function UserList() { // 유저 정보 const users = [ { id: 1, username: 'UserA', email: 'usera@gmail.c..

  Read More
• React 시작하기 7. 특정 DOM 선택하기 (useRef)

  DEV/react 2024. 1. 3. 17:06

  App.js import React from 'react'; import InputSample from '../src/InputSample'; function App() { return ( ); } export default App; InputSample.js import React, { useState, useRef } from "react"; function InputSample() { const [inputs, SetInputs] = useState({ name: '', nickname: '' }); // 특정 돔을 선택하기 위한 Hook 함수로 Ref 객체 생성 const nameInput = useRef(); const { name, nickname } = inputs; const onChang..

  Read More
• React 시작하기 6. Multiple Input State

  DEV/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..

  Read More
• React 시작하기 5. Input State

  DEV/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 = ()..

  Read More
• React 시작하기 4. useState

  DEV/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..

  Read More