본문 바로가기

나야, 리액트 스터디

 (42)
[week 6] useRef 뿌시기 안녕하세요 OB 김건휘입니다🌊. 이번 시간에는 useRef 훅을 딥다이브 해보는 시간을 가져보도록 하겠습니다.📌useRef렌더링과는 별개로 변수를 사용하거나 DOM 요소에 접근할 때 사용되는 기능이다.useState의 경우 값을 바꿀 때 화면도 렌더링 되지만, useRef는 렌더링과 관계없이 변경 가능한 값들을 가질 수 있다.=> Ref는 State와 비슷하게 어떠한 값을 저장해두는 저장 공간으로 활용됨 📌useRef vs useState특성useRefuseState리렌더링 여부값이 변경되어도 리렌더링되지 않음값이 변경되면 리렌더링 발생용도DOM 참조, 이전 값 저장, 비상태 값 관리상태 값을 저장하고 UI 갱신초기화 시점컴포넌트 초기화 시 1회 설정값 변경 시마다 갱신 가능📌 예시코드import..
[week6] Ref 안녕하세용 YB 이윤지예용 뭐 했다고 일주일이 이렇게 가고 벌써 일요일 저녁인지...요즘 시간이 너무 빨라요 🥲🥲 벌써 12월이네...이번 6주차에서는 'ref 로 값 참조하기' 에 대해서 알아보도록 할게요! 1. ref로 값 참조하기 1-1. ref 사용법컴포넌트가 특정 정보를 '기억'하도록 하고 싶지만 해당 정보가 새 렌더링을 촉발하지 않도록 하려는 경우 ref를 사용할 수 있다.import { useRef } from 'react';const ref = useRef(0);useRef훅을 가져와서 컴포넌트에 추가, 호출하고 참조할 초기값을 인자로 전달합니다.위 예시에서는 0은 ref에 대한 초기값입니다!useRef는 다음과 같은 객체를 반환합니다.{ current: 0 // The value ..
[week 6] Ref로 값 참조하기, Ref로 DOM조작하기 안녕하세요 ~ YB 김가현입니다 😴이번주는 Ref로 값 참조하기, Ref로 DOM조작하기 파트에 대해 알아보겠습니다useRef 훅에 대해서 잘 몰랐기 때문에 …. 새로운 내용들을 한가득 접했던 한 주였어요 !!😲 시작해보겠습니다 ~ useRef ?DOM 노드나 다른 React 요소에 대한 참조를 만들 때 사용하는 훅사용하기import { useRef } from 'react';const ref = useRef(0); useRef를 import 하고, 호출하여 참조할 초깃값을 인자로 전달한다 (타입 상관 x)이 ref는 모든 DOM 요소에 접근할 수 있게 된다. 위의 useRef는 다음과 같은 객체를 반환한다.{ current: 0 // useRef에 전달한 값 } current는 useRef가 반환..
[week6] Ref로 값 참조하기 안녕하세요 웹 YB 김다현입니다.어제 다들 잘 들어가셨나요?,,, 🐒 벌써 6주차라니 시간이 참 빠루네용 이번 주차엔 ref에 대해 공부해봤는데요! 항상 ref에 대한 개념이 부족하다고 생각했어서 이번 기회에 아티클을 통해 더 꼼꼼히 공부해보려고 합니다! 💥    Ref로 값 참조하기리액트 컴포넌트를 만들다 보면 '어떤 값이나 상태를 기억하고 싶지만, 이걸 바꾼다고 해서 화면이 다시 그려지는 건 싫어!' 라는 순간이 올 텐데요. 이럴 때 ref를 사용하면 됩니다. 그럼 Ref가 뭔데?ref는 리액트가 제공하는 특별한 도구로 컴포넌트 안에서 값을 저장해두는 비밀 주머니 ㅋㅋ 라고 생각하면 돼요. 이 주머니는 값이 바뀌어도 화면을 다시 그리지 않습니다. 1️⃣ 컴포넌트에 Ref 추가하기리액트에서는 use..
[week5] state 관리하기 안녕하세요! 물결웹팟 OB 박채연입니다 😞  리액트는 state를 통해 동적인 UI를 쉽게 관리할 수가 있는데요,그래서 이번주엔 State를 사용해 Input 다루기, State 구조 선택하기, 컴포넌트 간 State 공유하기, State를 보존하고 초기화하기 부분을 읽고, 리액트 state를 다시 정복해보려 합니다 !-! 오늘은 제 state가 시들시들해서 호다닥 시작해볼게요 ..    📍 State를 사용해 Input 다루기입력 필드의 값은 일반적으로 컴포넌트의 State로 관리합니다!이를 통해 사용자가 입력한 값을 실시간으로 추적할 수 있고,양방향 데이터 바인딩을 구현하지 않더라도 React의 단방향 데이터 흐름을 유지할 수 있습니다. 입력 필드의 value를 컴포넌트 State에 연결하고,on..
[week5] 컴포넌트 간 state 공유 안녕하세요 웹 YB 김다현입니다.거의 밤 새고 솝커톤 갔다가 약속까지 갔다오니,,, 너덜너덜해져서 결국 당일에 마감 직전에 아티클을 쓰게 됐네요 ㅠ,ㅠ다들 바쁜 와중에도 열심히 공부하는 모습 보니 넘 머싯고 그렇타 ,,, !!!아니 지금 보니까 저 오늘 발표네요 .......... 어쨌든 이번주차엔 input 다루기, state 구조 선택, 컴포넌트 간 state 공유, state 보존/초기화에 대해 공부해봤는데요. 저는 오늘 컴포넌트 간 state 공유에 대해 아티클을 써보려고 합니다!🖇 state 끌어올리기란?리액트를 쓰다 보면 두 컴포넌트가 같은 정보를 가지고 있어야 할 때가 있습니다.예를 들어 한 컴포넌트에서 버튼을 클릭했을 때 다른 컴포넌트에도 변화가 생기기를 원한다고 해볼게요.이럴 땐 두 컴..
[week5] 선언적 방식, 불필요한 상태 없애기, key를 이용해 state 초기화하기, Props를 state에 미러링X 안녕하세요🌊 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서의 State 관리하기하기 파트 중 선언적 방식, 불필요한 상태 없애기, key를 이용해 state 초기화하기에 대한 저의 경험을 바탕으로 이야기해보는 시간을 갖도록 하겠습니다. 📌State를 사용해 Input 다루기해당 챕터의 핵심 내용은 "선언적 방식으로 UI 설계"라고 할 수 있는데요.  🧐선언적 방식이 뭔데??React는 선언적인 프로그래밍(declarative programming)을 핵심 철학으로 삼고 있다. 이는 "어떻게(how)" UI를 구현할지 상세히 설명하기보다는, "무엇(what)"을 보여줘야 하는지에 집중하는 방식이라고 할 수 있다. ✅선언적 방식 vs 명령적 방식명령적 방식 (Imperative)UI를 구성하..
[week 5] state를 보존하고 초기화하기 안녕하세요 ? YB 김가현입니다일주일이 너무 빠르네요 ……. 전 솝커톤도 안(못)했는데 왜이렇게 바쁜지 모르겠습니다 ….. 5주차에는 state를 잘 구조화하는 방법, props, 리액트가 state를 제어하는 방법과 관련된 내용에 대해 알 수 있었는데요 ~! 비교적 낯설었던 내용인 State를 보존하고 초기화하기 부분을 위주로 공부한 내용을 정리해보았습니다 React는 JSX 구조를 기반으로 렌더 트리를 만든다.그렇다면, 컴포넌트에 state를 줄 때 state는 렌더 트리의 어디에 위치할까 ?State는 렌더 트리의 위치에 연결된다.컴포넌트 내부에 state가 존재하는 줄 알았다. 완전 착각이었음 …React는 UI 트리에서 해당 컴포넌트가 어디에 위치하는지에 따라 React가 관리하는 state를 ..

티스토리툴바