WINK-(Web & App)/React.js 스터디 (95) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 이가인 #5주차 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법: css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 SassCSS Modulestyled-components 1. Sass시작node-sass 라이브러리 설치(Sass->CSS변환) cd styling-with-sass $ yarn add node-sass Button 컴포넌트 만들기& : 부모 선택자 참조 $blue: #228be6; // 주석 선언 background: $blue; // 주석 사용 &:hover { //:hover 상태(사용자가 요소 위에 마우스를 올렸을 때) background: lighten($blue, 10%); // 색상 10% 밝게 } &:active { //:ac.. [2024 여름방학 React.js 스터디] 김태일 #5주차 "리액트 컴포넌트 스타일링" 00. 리액트 컴포넌트 스타일링 방법- 컴포넌트를 스타일링 할 때 자주 사용되는 기술1) Sass2) CSS Module3) styled-components 01. Sass- CSS pre-processor- 복잡한 작업을 쉽게 할 수 있도록 해주고, 코드의 재활용성 및 가독성을 높여줌- 두 가지 확장자 (.scss/.sass) 를 지원01-1 시작하기1) 새로운 리액트 프로젝트 만들기$ npx create-react-app styling-with-sass 2) 해당 프로젝트 디렉터리에 node-sass(Sass를 CSS로 변환해주는 역할) 라이브러리 설치$ cd styling-with-sass$ yarn add node-sass 01-2 Button 컴포넌트 만들기1) src 디렉터리에 componen.. [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.. 이전 1 2 3 4 5 6 7 ··· 12 다음
