[React] 5. Hook

리액트는 과거 버전에서 UI를 만들 땐 Function 컴포넌트 , 기능을 만들 땐 Class 컴포넌트로 분류하여 작성하였으며  당시에는 State , Ref 라는 기능으로 사용이 되었으나 이제는 Hook 을 통해 Class 컴포넌트로 사용되던 기능들을 낚아채 Function으로 가져간다는 의미로 Hook 이라고 부른다.  Hook 으로 만들어진 것들은 모두 use 가 앞에 붙는 형태로 이루어져 있습니다. (useState , useRef 등등)(단, 이런 Hook 들은 함수 컴포넌트 내부에서만 호출 가능, 조건문(반복문) 내에선 불가능함. ) 또한 기존의 State , Ref가 아닌 내가 필요로 하는 기능을 제작해 만들 수 있는데 이걸 Custom Hook이라 부른다.  예시로 import { useR..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms

[React] 4. useRef

앞의 useState 는 동적인 데이터에 대해 update 가 발생하면 렌더링이 발생하는 반면useRef 의 경우 렌더링 없이 값을 변경한다. 단, 화면에 즉각적으로 보여줘야 할 경우 useState ,값이 변경 되는건 맞지만 화면에 반영하지 않는 내용일 경우 useRef 를 쓴다고 생각하면된다. 예를 들어서 화면에는 보이지 않는 키 값이나 boolean 같은걸 저장하는 변수로 쓰기 좋다 .  count 코드를 재사용해서 보게 된다면  import { useRef, useState } from 'react'import './App.css'import Input from './components/Input'function App() { const [count, setCount] = useState(1);..

• format_list_bulleted JavaScript/React
• · 2025. 2. 13.
• textsms

[React] 3. 상태 (State) [Props와 이어집니다.]

리액트는 대부분 use 로 시작하는데 그 중에서 useState 는 상태를 의미하며 컴포넌트에서 "동적"인 데이터를 관리하는 기능입니다.  즉 컴포넌트의 상태가 바뀌면 리렌더링이 발생합니다 (새로고침)그렇기 때문에 남발하게 되면 안됩니다..  선언 자체도 스프링에서 데이터 업데이트하는 것과 비슷합니다.const [???, set???] = useState(); 이런 구조로 많이 되어 있습니다.  앞에서 말한 예시에서 setState 를 사용하지 않고 오로지 props 를 사용하게 되면 변경이 안 되기 때문에 들고 있는 값을 그대로 가져옵니다 ( 버튼 같은 경우 계속 초기값을 가짐 )하지만 state는 입력 받은 값 을 const[count, setcount] = useState();  기준으로 count..

• format_list_bulleted JavaScript/React
• · 2025. 2. 12.
• textsms

[React] 2. 속성 (Props)

Component 는 React 에서 html 태그를 가지고 있는 블록이라고 설명 했는데 여기서각각의 블록은 상태 (State) 를 가지게 됩니다.그리고 부모 컴포넌트가 가진 데이터를 속성(Props) 를 통해 자식 컴포넌트에게 전송 할 수 있습니다.하지만 위에 그린 그림처럼 화살표는 무조건 위에서 아래로만 갑니다. (리듀서 or 리덕스를 사용하게 되면 조금 다릅니다.)즉, 속성(Props)은 부모에서 자식 컴포넌트 방향으로만 가는 단방향 데이터이며,또한 자식 컴포넌트는 부모에게 받은 Props를 수정 할 수 없습니다 (readonly)또한 객체 형태로 전송하기에 여러 값을 보낼 수 있습니다.간단하게 짜보면최상위 App 컴포넌트에서 하위 컴포넌트인 Profile 이라는 컴포넌트에게 data 라는 key로..

• format_list_bulleted JavaScript/React
• · 2025. 2. 12.
• textsms

[React] 0. 세팅

우선 자바스크립트 계열들은 vscode 를 많이 쓰기 때문에 vscode 먼저 다운 받고 node.js 까지 받았다는 전제하에 (만약 없다면 .. https://nodejs.org/ko 가셔서 node.js 다운 )( https://code.visualstudio.com/Download 가셔서 vscode 다운) 1. vite  터미널에 2가지 방법으로 프로젝트를 생성 할 수 있습니다 .  첫 번쨰는 npx create-react-app 프로젝트명두 번쨰는 create vite@latest ( 만약 powershell 을 통한 터미널인 경우 npx create-vite@latest ) 둘의 차이는 npx 같은 경우엔 Webpack vite 같은 경우엔 ESBuild 를 사용해서 번들링을 진행하게 되는데 ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 7.
• textsms