02. 컴포넌트 (6) state를 전달받는 컴포넌트
·
✏️ Study/⚛️ React
출처 - 리액트를 다루는 기술(김민준 지음) state를 컴포넌트 내부에서 사용하는 것 뿐만 아니라 자식 컴포넌트로 전달하여 실시간으로 다시 렌더링되도록 하는 것도 가능하다. // Greeting.js import React from 'react'; // state를 전달받기 때문에 괄호로 감싸줘야 한다 const Greeting = ({ username }) => { return {username}님 안녕하세요.; } export default Greeting; import React, { useState } from 'react'; import Greeting from './Greeting'; function App() { const [username, setUsername] = useState(''..
02. 컴포넌트 (5) useState
·
✏️ Study/⚛️ React
출처 - 리액트를 다루는 기술(김민준 지음) 리액트 16.8 이후 부터는 useState 함수를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 됐다 이 과정에서 Hooks를 사용하게 된다 state의 값을 업데이트 할 때는, state 값에 직접 접근하면 안됨. setState 또는 세터 함수로 값을 변경해야 한다 (그렇지 않으면 바뀐 값이 렌더링 X) (1) useState 사용하기 Say.js 파일을 생성한다 useState로 state 값을 바꿀 때는 useState를 통해 전달받은 세터 함수를 사용한다 // Say.js import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useS..