mingg IT

보호되어 있는 글입니다.

보호되어 있는 글입니다.

ref 를 이용하면 돔 요소에 직접 접근 할 수 있다. 돔 요소에 포커스를 주거나, 크기나 스크롤 위치를 알고 싶을 경우 함수형 컴포넌트에서 ref 속성값을 사용한 예 import React, { useRef, useEffect } from "react"; function TextInput({ inputRef }) { return ( 저장 ); } export default function Form() { const inputRef = useRef(); useEffect(() => { inputRef.current.focus(); }, []); return ( inputRef.current.focus()}>텍스트로 이동 ); } forwardRef 함수를 사용하는 코드 import React, { use..

사용하지 않은 예제 function App() { return ( 상단 메뉴 하단 메뉴 ); } function Profile({username}) { return ( ); } function Greeting({username}) { return {`${username}님 안녕하세요`}; } Profile은 컴포넌트로 속성 값만을 전달하고 username을 사용하지 않음 사용한 예제 const UserContext = React.createContext(""); function App() { return ( 상단 메뉴 하단 메뉴 ); } function Profile() { return ( ); } function Greeting() { return ( {(username) => {`${username}..

함수 실행 시 함수 외부의 상태를 변경하는 연산을 부수 효과라고 부른다. useEffect를 주로 사용함. ex) API호출, 이벤트 처리 함수를 등록, 해제 [API 호출 예제] import React, { useState, useEffect } from "react"; export default function MyComponent(userId) { const [user, setuser] = useState(null); useEffect(() => { getUserApi(userId).then((data) => setuser(data)); }, [userId]); return ( {!user && 사용자 정보를 가져오는 중...} {user && ( {`name is $(user.name)`} {`a..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

ex) 예제 let seconds = 0; function update() { seconds += 1; const element = ( 안녕하세요 지금까지 {seconds} 초가 지났습니다. ); ReactDOM.render(element, document.getElementById("root")); } setInterval(update, 1000);