WINK-(Web & App)/React.js 스터디 (77) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 김민서 #5주차 Sass Css pre-processor, 복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성과 가독성을 높여준다두가지의 확장자 (.scss/ .sass) 를 지원한다 /* sass */$font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-color/* scss */$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;} 1. 시작하기$ npx create-react-app styling-with-sas$ cd styling.. [2024 여름방학 React.js 스터디] 이종윤 #5주차 리엑트 컴포넌트 스타일링하기리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 이다. 하지만 컴포넌트를 스타일링 할 때 다른 도구들을 사용하면 훨씬 더 편하게 작업을 할 수 있다.SassCSS Modulestyled-components이 블로그에서 위 3가지 기술들을 볼 것이다.1. Sass: CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, Sass는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. Sass에는 Sass와 SCSS가 있다.또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어.. [2024 여름방학 React.js 스터디] 이정욱 #4주차 react 하기 힘들어요 10. useRef 로 특정 DOM 선택하기특정 DOM 을 선택하기 위해서 DOM selector를 사용할 수도 있지만, ex) getElementById리액트를 사용하는 프로젝트에서도 가끔 DOM 을 직접 선택해야 하는데그때 사용하는 것이 UseRef() 이다. 함수형 컴포넌트에서 ref를 사용하려면 useRef 라는 Hook 함수를 사용해준다. 사용하는 법은 1.react 라이브러리에서 useRef를 불러온다import React, { useState, useRef } from 'react'; 2. useRef 객체를 생성해준다.const nameInput = useRef(); 3. 생성한 객체를 선택하고 싶은 DOM 에서 ref 값으로 지정한다. 4. 선택한 DOM을 참조하고 싶을 때 해당 객체의 .. [2024 여름방학 React.js 스터디] 이가인 #4주차 10. useRef 로 특정 DOM 선택ref, useRef 의미ref는 React에서 DOM 요소나 클래스 인스턴스를 참조할 수 있게 해주는 속성이며 주로 직접 DOM 접근이 필요한 경우 사용useRef는 함수형 컴포넌트에서 ref를 사용할 때 사용하는 React Hook.useRef는 렌더링 간에 값을 유지할 수 있도록 함ref와 함께 DOM 요소나 값을 참조하는 데 사용됨react에서 ref를 사용하는이유DOM 접근: React의 가상 DOM은 실제 DOM을 추상화하기 때문에, 직접 DOM을 조작해야 할 때 ref를 사용함. (ex 포커스를 설정하거나, 스크롤 위치를 조절할 때 )자식 컴포넌트의 접근: 클래스 기반 컴포넌트에서 자식 컴포넌트의 메서드나 인스턴스에 접근해야 할 때 ref를 사용함. 함.. [2024 여름방학 React.js 스터디] 이종윤 #4주차 useRef: useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. - useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다.const 변수명 = useRef(초기값) useRef는 변수명에 초기값을 적는 식으로 만든다.이러한 결과값으로, {current: 초기값} 을 지닌 객체가 반환된다.useRef에서 기억할 것은 이러한 current라는 키값을 지닌 프로퍼티가 생성되고, 값에 어떤 변경을 줄때도 이 current를 이용해서 한다는 점이다. 그리고 이렇게 반환할 수 있다.useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.그리고 이 값을 수정 할때에는 .curren.. [2024 여름방학 React.js 스터디] 강보경 #4주차 useRef- ref: 리액트에서 특정 DOM을 선택할 때 사용- 함수형 컴포넌트에서 ref을 사용할 때에 useRef라는 Hook을 사용함import React, { useState, useRef } from 'react';const InputSample = () => { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 na.. [2024 여름방학 React.js 스터디] 김태일 #4주차 "리액트 입문(2)" 10. useRef로 특정 DOM 선택하기- ref : DOM을 선택해야 하는 상황에서 사용- useRef : 저장공간 또는 DOM요소에 접근하기 위해 사용되는 리액트 훅- 리액트 훅 : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리▷리액트 훅 설명자료 : https://taei1.tistory.com/30 리액트 훅(React Hook)01. 리액트 훅이란?- 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리- 클래스형 컴포넌트taei1.tistory.com ▼초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef를 사.. [2024 여름방학 React.js 스터디] 김민서 #4주차 useRef 리액트에서 직접 DOM을 선택해야 할 때 ref를 사용한다함수형 컴포넌트에서 ref 사용 - useRef라는 Hook 함수(함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있게 해줌)를 사용클래스형 컴포넌트에서 - 콜백 함수 또는 React.createRef 함수 사용import React, { useState, useRef } from 'react';const InputSample = () => { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); // Ref 객체 만들기 const { name, nickname } = inputs; // 구조 분해.. 이전 1 2 3 4 5 ··· 10 다음
