전체 글34 1-9) [리액트 기초] useEffect 사용법 import { useEffect } from 'react'; useEffect(() => { console.log('update...'); }) useEffect(callback, [의존성 배열]); 의존성배열 : 컴포넌트의 변화를 catch 하고 싶으면 의존성 배열에 값을 매핑 여러 개의 값 변화 검사하기 useEffect의 배열 요소가 여러 개 있어도 마찬가지로 검사가 가능하다. 배열 요소 중 하나라도 변경되면 useEffect는 콜백 함수를 실행한다. // count_app/src/component/Controller.js const Controller = (props) => { const { handleSetcount } = props; return ( handleSetcount(-1)}>-1 .. 2024. 1. 30. 1-8) [리액트 기초] Ref 사용방법 리액트의 Ref 를 이용하면 돔(DOM) 요소들을 직접 조작할 수 있다. Ref는 Ref-erence의 줄임말로 참조라는 뜻이다. useRef 사용하기 일단 아래와 같이 작성하자. // src/App.js import './App.css'; import Header from './components/Header'; import Body from './components/Body'; import Content1Refactor from './components/contents/Content1Refactor'; import Content2 from './components/contents/Content2'; import Footer from './components/Footer'; import ContentU.. 2024. 1. 29. 1-7) [리액트 기초] 여러 개의 입력 상태 관리하기 여러 개의 입력 상태 관리 많은 홈페이지를 보면 입력창이 간단한 폼 형식으로 되어있지 않고, 다양한 입력 컴포넌트들로 구성되어있다. 회원가입 페이지만 보더라도 사용자로부터 10~ 20개의 항목을 입력 받는다. // src/App.js import './App.css'; import Header from './components/Header'; import Body from './components/Body'; import Content1 from './components/contents/Content1' import Footer from './components/Footer'; function App() { return ( //추가하자 ); } export default App; src 디렉토리 밑에 c.. 2024. 1. 29. 1-6) [리액트 기초] 컴포넌트 이벤트 호출 https://jframework.tistory.com/24 1-5) [리액트 기초] 컴포넌트 값 전달하기 https://jframework.tistory.com/23 1-4) [리액트 기초] JSX란? JSX 문법 // src/components/Body.js import './Body.css'; const Body = () => { const numA = 1; const numB = 2; const strA = 'Hello'; const strB = 'World'; const boolA = true; const boolB = f jframework.tistory.com 이어서.. 이번에는 Props로 컴포넌트 자체를 전달하는 방법을 해보도록 하자. 최상위 App 컴포넌트에서 새로운 자식컴포넌트인 Ch.. 2024. 1. 24. 이전 1 2 3 4 5 6 ··· 9 다음
