목록 Introduction useRef Conclusion 📌 Introduction 안녕하세요. 오늘은 useRef로 변수를 선언하는 것에 대해서 알아보겠습니다. 값을 선언할때 react에서는 두가지 방식이 있어요. 하나는 useState를 사용하는 방식이고 하나는 useRef를 사용하는 방식입니다. 두개의 차이점은 useState는 값이 변경이 될때 rerendering이 이루어 지고 useRef는 값이 변경이 되어도 rerendering이 이루어지지 않습니다. 또한 component가 re-rendering될때에도 값을 기억하고자 할때 useRef 를 사용하게 됩니다. 그럼 기본적인 문법과 사용하는 예제를 알아보겠습니다. 📌 useRef const nextId = useRef(4); // comp..
📌 목록 Introduction rendering array Conclusion 📌 Introduction 안녕하세요. 오늘은 array의 항목들을 랜더링하는 방법에 대해서 알아보겠습니다. 해당 내용은 vue에서 v-for과 비슷합니다. 📌 rendering array 어떻게 array를 랜더링 할까요? 방법은 map을 이용하는 겁니다. import React from "react"; function User({ user }) { return ( {user.username} {user.email} ); } function UserList() { const users = [ { id: 1, username: "eddie", email: "eddie@gmail.com", }, { id: 2, username..
📌 목차 Introduction useRef Conclusion 📌 Introduction 안녕하세요. 이번 시간에서는 useRef를 변수같이 사용하는 것이 아닌 document.querySelector와 같은 기능을 하는 react useRef를 만나볼게요. 📌 useRef import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: "", nickname: "", }); const nameInput = useRef(); const { name, nickname } = inputs; const onChange = (e) => { const { name,..
목차 Introduction 하나의 input 상태관리 여러개의 input 상태관리 Conclusion 📌 Introduction 안녕하세요. 오늘은 react에서의 input관리에 대해서 알아보겠습니다. vue에서는 깔끔하게 v-model로 관리를 할 수 있지만 react에서는 해당 기능이 없어 조금 복잡하지만 잘 설명을 해보겠습니다.🎉 📌 하나의 input 상태관리 일단 하나의 input 상태관리는 비교적 쉽습니다. useState를 이용하여서 text를 바꿔주고 value로 연결을 시켜주면 됩니다. import React, { useState } from "react"; function InputSample() { const [text, setText] = useState(""); const onC..
📌 목차 Introduction useState useState call back function Conclusion 📌 Introduction 안녕하세요. 오늘은 드디어 react hooks중 하나인 useState에 대해서 알아보겠습니다. 📌 useState 간단하게 counter를 만들어 보겠습니다. useState(arg) // useState안에 인자는 초기 값을 설정합니다. const [number, setNumber] = useState(0); // 그리고 array를 반환하게 되는데 첫번째 인덱스는 값, 두번째 인덱스는 number를 설정하는 함수를 반환합니다. import React, { useState } from "react"; function Counter() { const [num..
📌 목차 Introduction Conditional Rendering Condtional Props Conclusion 📌 Introduction 안녕하세요 오늘은 react에서의 conditional rendering에 대해서 알아보겠습니다. conditional rendering은 vue에서의 v-if 같은 녀석이라고 생각하시면 편할거 같아요. 📌 Conditional Rendering 일단 먼저 Hello에게 props로 isSpecial을 넘겨주겠습니다. import React from "react"; import Hello from "./Hello"; import Wrapper from "./Wrapper"; function App() { return ( ); } export default A..
📌 목차 Introduction What is Props Implementation Props Children Props PropTypes DefaultProps Conclsution 📌 Introduction 안녕하세요. 오늘은 이제 react props에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 What is Props props는 properties의 줄임말입니다. 이 props는 상위의 부모요소가 하위인 자식요소에게 데이터를 전달할때 쓰입니다. 📌 Implementation Props 간단하게 App.js 에서 Hello.js에 props로 전달을 해보겠습니다. // App.js import React from "react"; import Hello from "./Hel..
