본문 바로가기

분류 전체보기

 (200)
자바스크립트 - 배열 고차 함수 안녕하세요, 35기 웹파트 YB 김태욱입니다. 2주차 과제가 끝난지 거의 한 달이 넘은 것 같은데... 이제서야 2주차 공유과제를 올리게 되었습니다. 😂 제가 작성할 주제는 이번 합동세미나에서도 정말 많이 사용했고, jsx와 tsx 사용시에 정말 많이 사용하게 되는 자바스크립트의 배열 고차 함수입니다. 고차 함수란, 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드를 일컫고 함수형 프로그램 (JS, 파이썬)의 핵심이기도 합니다. - 함수형 프로그래밍이란?함수형 프로그래밍은 함수를 다른 함수의 매개변수로 넘길 수도 있고 return 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말한다. - 배열 고차 함수1. forEach()- for문을 대체하는 고차함수- 반복문을 추상화하여 구현되었고, ..
[Week 6] Ref 🍥 Ref란?ref는 React 컴포넌트에서 DOM 요소 또는 React 컴포넌트 인스턴스에 직접 접근할 수 있는 방법을 제공한다.일반적으로 React는 데이터의 흐름을 통해 UI를 관리하지만, ref는 예외적으로 직접적인 접근이 필요할 때 사용된다. React가 렌더링 사이클에서 관리하지 않는 값(예: DOM 요소)과의 상호작용에 사용렌더링에 영향을 주지 않으며 값이 변해도 컴포넌트를 다시 렌더링하지 않음  1️⃣ Ref 사용법 ✔️ useRef를 사용해서 ref를 생성import { useRef } from 'react';const ref = useRef(0);  ✔️ useRef가 반환하는 객체 : currentref.current 프로퍼티를 통해 해당 ref의 current 값에 접근할 수 있고..
[week6]탈출구 - Ref로 값 참조하기, Ref로 DOM조작하기 하.......................발표라고 3시간 넘게 쓰고 있던 제 아티클이 날아갔네요........ 막 눈싸움도 하고 싶다고 쓰고 신나는 얘기가 많았는데......급해서 이름도 안 적었네여 웹파트 YB 한수정입니다 ~! 지금은 좀 정신이 회복돼서 다시 읽다가 발견했습니다😆 이번엔 딴 얘기 없이 바로 아티클 시작하겠습니다.6주차는 Ref로 값 참조하기, Ref로 DOM조작하기입니다 !! 컴포넌트에 ref를 추가하기// React에서 useRef Hook을 가져와 컴포넌트에 ref를 추가할 수 있습니다.import { useRef } from 'react';// 컴포넌트 내에서 useRef Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. // 아래는 값 0에 대한 ref 입니다...
[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..
🏄‍♀️ 리심스 5주차 - 리액트 서버 컴포넌트 리액트가 서버에서만 단독으로 실행되는 리액트 서버 컴포넌트를 공개했다고 하는데, 그게 무엇인지 설명하기에 앞서 이해를 돕기 위해 서버사이드 렌더링이 무엇인지 간략하게 알아보겠다.서버 사이드 렌더링(SSR)이란?기본적인 리액트 애플리케이션은 아래 사진과 같이 클라이언트 사이드 렌더링(CSR)으로 동작한다. 클라이언트 사이드 렌더링을 사용하는 앱의 경우 페이지 진입 시 HTML, 자바스크립트 그리고 모든 데이터가 로드되고 컴포넌트 렌더링이 끝나기 전까지 사용자는 아무런 기능이 없는 빈 화면만 보게되는데, 이는 사용자 경험을 저하시킨다.반면 서버사이드렌더링(SSR)은, 클라이언트 애플리케이션의 자바스크립트 파일을 서버에서 먼저 HTML로 렌더링하기 때문에 빈 화면 대신 데이터가 존재하는 HTML을 제공함으로써..

티스토리툴바