🥞 이번 시간에는 useRef로 리액트에서 특정 DOM을 선택하는 방법에 대해서 알아보겠다. HTML과 자바스크립트를 사용할 때에는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM 셀렉터 함수를 사용하여 DOM을 선택한다. 리액트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생할 수 있다. 예를 들어, 특정 엘리먼트의 위치나 크기를 가져와야 한다던지 스크롤바 위치를 가져오거나 설정해야 한다던지, 포커스를 설정해주어야 한다던지 등 다양한 상황이 있다. 그럴때 리액트에서는 ref 라는 것을 사용한다. 🥞useRef라는 hook 사용하기 함수형 컴포넌트에서 ref를 사용하려면 useRef라는 hook을 사용한다. 그리고 클래스 컴포넌트에서는 React...

🍈이번 시간에는 input이 여러 개일 때 상태를 관리하는 방법에 대해서 알아보겠다. function InputSample(){ const onChange = (event) => { }; const handleReset = () => { }; return ( 초기화 값: 이름 (닉네임) ) } 위와 같이 InputSample 컴포넌트를 작성한다. 이렇게 보인다. 일단 지금은 값에 해당하는 이름 (닉네임) 을 수동으로 작성해 주었다. 🍈 좋지 않은 방법 input이 이렇게 여러 개 되었을 때는 단순히 useState를 여러 번 사용하여 onChange도 여러 개 만들고, 그렇게 구현을 할 수도 있는데 그 방법은 좋은 방법은 아니다. 🍈 좋은 방법 - useState가 객체를 관리하도록 하기 더 좋은 방법은..

💩이번 시간에는 리액트에서 input 상태를 어떻게 관리하는지 알아보겠습니다. 지난시간에 우리는 button을 이용해서 숫자의 상태를 관리하는 법을 배웠는데, 이렇게 버튼 말고 input은 어떻게 관리할까? import React from "react"; function InputSample(){ return ( 초기화 값: ) } export default InputSample; ✅ InputSample.js InputSample 컴포넌트를 만든다. 그리고 늘 그랬듯 App 컴포넌트에서 InputSample 컴포넌트를 렌더링한다. 이전에 버튼에서는 onClick이라는 이벤트를 관리했었는데, input에서는 onChange라는 이벤트를 관리해보도록 하겠다. function InputSample(){ co..

🍺 이번 시간에는 useState를 통해 컴포넌트에서 '바뀌는 값' 관리하는 방법에 대해서 배워보겠다. 지금까지 우리가 리액트 컴포넌트를 만들 때에는 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었다. 이번 시간에는 컴포넌트에서 보여주어야 하는 내용이 사용자의 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할지에 대하여 알아보겠다. 🍺Hooks 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태(state)를 관리할 수 없었다. (그래서 클래스 컴포넌트를 사용했었다. state안에 값이 변화해야 하는 변수를 넣었던 것) 그러나 리액트 16.8부터 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태(state)를 관리할 수 있게 되었다. 우선 useState를 사용해볼 것인데, 이게 리액트..

🐣 이번 시간에는 조건부 렌더링에 대해서 알아보겠다. 🐣 조건부 렌더링이란? 조건부 렌더링: 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 말한다. 조건부 렌더링을 사용하는 가장 쉬운 방법은 삼항 연산자를 사용하는 것이다. (삼항연산자-> 조건식 ? 참 : 거짓) function App() { return ( ); } 위와 같이 App 컴포넌트에서 Hello 컴포넌트의 props로 isSpecial을 true로 추가한다. true도 자바스크립트 값이기 때문에 중괄호 안에 적어주었다. function Hello({name,color, isSpecial}){ return ( {isSpecial ? ⭐ : null} {name}님 안녕하세요. ) } 이렇게 isSpecial의 값이 있는지 물..

🍫 이번 시간에는 props를 통해 컴포넌트에게 값을 전달하는 법, 그리고 children에 대해 알아보겠다. 🍫 props란? properties의 줄임말 컴포넌트를 사용하게 될 때 특정 값을 전달해주고 싶을 때 사용하는 것 🍫props를 이용해서 컴포넌트에 값 전달하기 function App() { return ( ); } App 컴포넌트에서 Hello 컴포넌트에 name이라는 것을 전달해주고 싶다면 이렇게 작성하면 된다. 🍫 전달받은 props를 컴포넌트에서 사용하기 function Hello(props){ console.log(props) return Hello!; } Hello 컴포넌트에서 props를 사용하고 싶다면 인자로 props를 넣어주면 된다. props를 콘솔로 확인해보면 다음과 같다..