분류 전체보기 (853) 썸네일형 리스트형 [2025 1학기 React.js 스터디] 정채은 #4주차 1장 10~16 10. useRef 로 특정 DOM 선택하기 ref 가 뭔가? React에서 DOM요소나 클래스형 컴포넌트에 직접 접근할수 있게 도와주는 기능 ! 즉, 포인터 같은 역할 [useRef] 함수의 Hook 중 하나, 함수형 컴포넌트에서 사용되고 DOM 요소나 값을 저장할 때 사용됨.렌더링 유발 X Hook 이 먼지 몰랏다. Hook 이란.. 클래스형 컴포넌트에서만 사용되던 상태 관리와 라이프사이클 메서드를 함수형 컴포넌트에서 간단하게 사용하게 만든것. 대표 훅 들... useState(상태 관리), useEffect(사이드 이펙트 관리), useRef(DOM 접근), useContext(전역 상태 관리) ★ 클래스형 컴포넌트 vs 함수형 컴포넌트구분클래스형 컴포넌트함수형 컴포넌트선언 .. [2025 1학기 React.js 스터디] 강민지 #4주차 1. useRef 기능 (1): ref를 사용하여 특정 DOM 선택하기 !EX) 초기화 버튼 누르고 난 후, 커서가 이름 입력칸으로 포커스 되도록 기능 구현 Ref 객체 만들기 -> 원하는 DOM에 ref값 설정 -> 실행 순서!! 2. 배열 렌더링하기 # 고정적인 배열 렌더링 # 동적인 배열 렌더링 -> map() 함수 사용 !++++++++++key(고유 식별값) props 설정 만약 고유값이 없다면, index를 key로 사용 ! 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문에key 는 꼭꼭 필요하다 !!! 3. useRef 기능 (2) : 변수를 관리 & 설정 후 바로 조회 O / 값이 바뀌어도 컴포넌트가 리렌더링 되지 않음 EX) 배열에 새 항목을 추가할.. [2025 1학기 React.js 스터디] 최은희 #4주차 소리 한 번 지르고 시작.....useRef-리액트는 DOM을 직접 조작하지 않고 가짜를 사용하는데, 직접 조작해야할 때가 생긴다 이때!! ueseRef를 사용(DOM을 조작하거나 변하지 않는 데이터를 기억할 때 사용하는 훅)(리액트 훅은 컴포넌트에서 상태관리 state나 생명주기 관리 useEffect를 가능하게 하는 함수들이라고 한다) -내부적으로 저장만 하고 싶을 때 사용한다 (화면에 보여주고 싶을 땐 useState사용) -> 무엇을 알수 있는가?!useRef로 연결된 HTML 태그는 .current를 통해 언제든지 직접 조작할 수 있다!!만약 useState로 하면 상태를 바꾸고 나면 컴포넌트가 다시 렌더링 되지만 useRef는 몰래 돔만 조작한다map()-여러 데이터를 담은 배열을 map()로.. [2025 ROS 스터디] 조원영 #3주차- ROS 기본 프로그래밍 ROS 기본 프로그래밍1. ROS 프로그래밍 전에 알아둬야 할 사항표준 단위Angle = RadianFrequency = HertzForce = NewtonPower = WattVoltage = VoltLength = MeterMass = KilogramTime = SecondCurrent = AmpereTemperature = Celsius좌표 표현 방식X = Forward, Y = Left, Z = Up오른손 법칙프로그래밍 규칙under_scored: 패키지, 토픽, 서비스 등CamelCased: 타입, 클래스, 구조체, 함수, 메소드 등ALL_CAPITALS: 상수, 매크로 등2. Publisher와 Subscriber 노드 작성 및 실행1. 패키지 생성$ cd ~/catkin_ws/src$ cat.. [2025 1학기 알고리즘 스터디] 윤성욱 #3주차 11047. 동전 0import java.util.Scanner;public class makeZero { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); int k = sc.nextInt(); int cnt = 0; int[] coins = new int[n]; for (int i = 0; i = 0; i--) { if (coins[i] 1541. 잃어버린 괄호import java.io.BufferedReader;import java.io.IOException;import .. [2025 1학기 React.js 스터디] 이가인 #4주차 1. useRef 로 특정 DOM 선택2. 배열 렌더링3. useRef로 컴포넌트 안에 변수 만들기4. 배열에 항목 추가5. 배열 항목 제거 6. 배열 항목 수정7. useEffect useRef 로 특정 DOM 선택하는 방법 - !- ref 사용 이유1. DOM에 직접 접근 가능2. useState와 달리 값이 변해도 컴포넌트가 리렌더링되지 않고 값 저장 가능함3. 이전 값이나 상태를 저장해두고 싶을 때 유용함 - useRef라는 Hook 함수 사용React에서 DOM 요소나 값의 참조(reference) 를 저장하고 유지하기 위해 사용하는 Hook 기존 InputSample코드에서 초기화 버튼을 클릭했을 때 포커스가 초기화 버튼에 그대로 남아있음이름 input 에 포커스가 잡히도록 useRef 를.. [2025 1학기 React.js 스터디] 한혜민 #4주차 useRef로 특정 DOM 선택하기이전에 만든 InputSample에서 초기화 버튼을 클릭했을 때 input에 포커스가 잡히도록 해보겠음. 코드 작성하고 브라우저에서 인풋에 값을 입력하고 초기화를 눌러보면이름에 포커스가 잡히는 것을 확인해볼 수 있음 !!!!!!!!!!!!!!!!!!!!!! 배열 렌더링하기반복되는 코드를 사용하는 것은 비효율적임.효율적인 배열을 위해 동적인 배열을 렌더링할 때 쓰이는 map 함수와 각 원소마다 가지는 고유값으로 설정된 key를 사용하여 배열을 렌더링할 것임. useRef로 컴포넌트 안의 변수 만들기이번에는 App 컴포넌트에서 useRef를 사용하여 변수를 관리해볼 거임.용도는 배열에 새 항목을 추가하고, 그 새 항복에서 사용할 고유 id를 관리하는 용도임. useRe.. [2025 1학기 알고리즘 스터디] 김민주 #3주차 알고리즘 스터디 3주차 : 그리디 알고리즘 1. 회의실 배정https://www.acmicpc.net/problem/1931💡문제 분석 및 알고리즘 설계가장 대표적인 그리디 문제인 회의실 배정은 최초 아이디어만 떠올리면 구현하기는 어렵지않은 것 같습니다.(근데 이제 처음에는 절대 생각안나는 ㅠㅡㅠ)저는 이미 풀이 방법을 알고있어서 바로 구현해봤습니다. 회의 시작시간과 끝나는 시간을 pair로 갖도록 배열을 생성하고,끝나는 시간을 비교해서 최대 회의가 가능하도록 알고리즘을 설계했습니다. #include #include #include using namespace std;int n, a, b;int num =1;pair arr[100001];int main(){ cin >> n; for (in.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 107 다음
