useEffect3 React Hooks - useState, useEffect Hook? 함수 컴포넌트에서 리액트 state 와 생명주기 기능을 연동할 수 있게 해주는 함수를 의미 (class 없이 리액트를 사용할 수 있게 해주는 것) Hook 은 React 버전 16.8부터 리액트 요소로 새로 추가 되었다. Hook 을 사용하여 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있다. Hook 은 props, state, context, refs, lifecycle 과 같은 리액트 개념에 좀더 직관적인 api 를 제공해준다. 생명주기 메서드를 기반으로 쪼개는 것보다 훅을 통하여 서로 비슷한 것을 하는 작은 함수를 묶음으로 컴포넌트를 나누는 방식이 직관적으로 이해하기 용이하다. https://ko.reactjs.org/docs/hooks-o.. 2023. 4. 1. KDT 5th 웹개발자 입문 수업 39일차 조건부 렌더링 컴포넌트를 상황에 따라 켜고 끄려면 -> 조건부 렌더링이 필요 원래 js, html 에서는 display 속성을 none 으로 처리해줬지만 리액트는 jsx 문법을 사용하므로 if 문/3항 연산자/논리 연산자와 html 태그를 같이 사용해주면 되므로 display 속성을 처리할 필요가 없다. export default function CoditionalState() { const [isVisible, setIsVisible] = useState(false); const toggle = () => { setIsVisible(!isVisible); }; return ( {isVisible ? 'Off' : 'On'} {isVisible && } ); } && 연산자를 사용하면 display 속성.. 2023. 3. 30. 한입 크기로 잘라먹는 리액트 - 4 전에 더미 데이터를 선언해주고 그 데이터만 일기 리스트에 보이게 만들었었다. 이번에는 이 더미 데이터를 없애주고, 직접 일기를 입력해준 내용이 나오게 만들어줘본다. 부모 컴포넌트인 App 에서 data를 관리하는 state 함수를 만들어주고 일기를 입력 받는 자식 컴포넌트에게는 해당 입력 필드의 값을 읽어서 데이터를 추가해줄 수 있는 setData가 포함된 함수를 넣어주고 일기를 보여주는 자식 컴포넌트에는 입력 받은 data 자체를 보내줘서 관리해준다. function App() { const [data,setData] = useState([]); const dataId = useRef(0); const onCreate = (author, content, emotion) => { const created.. 2023. 3. 30. 이전 1 다음
