WINK-(Web & App)/React.js 스터디 (93) 썸네일형 리스트형 [2024-2 React.js 스터디] 윤아영 #3주차 1. SassSass는 CSS pre-processor로서 복잡한 작업을 쉽게 해주고, 코드의 재활용성과 가독성을 높여주어 유지보수를 쉽게 해준다.Sass에서는 .scss, .sass 두가지 확장자를 지원한다. 보통 .scss 문법이 더 많이 사용되고, 이 글에서는 .scss를 사용할 것이다. 1) 시작프로젝트 디렉터리에 다음 명령어를 사용하여 node-sass 라이브러리(Sass를 CSS로 변환해주는 라이브러리)를 설치한다.$ cd styling-with-sass$ yarn add node-sass// 또는$ npm install node-sass 2) Button 컴포넌트 만들기Button 컴포넌트를 만들고, Sass를 사용하여 스타일링해보자.// components/Button.jsimport Re.. [2024-2 React.js 스터디 ] 김지수 #3주차 보호되어 있는 글입니다. [2024-2 React.js 스터디 ] 이서영 #2주차 useEffect→ 마운트, 언마운트, 업데이트 할 시 작업 설정 첫 번째 파라미터 → 함수두 번째 파라미터 → 배열( deps )→ if deps 비움, 컴포넌트가 처음 나타날 때에만 useEffect에 등록한 함수 호출 cleanup 함수 → useEffect 함수 반환→ deps 비움, 컴포넌트 사라질 때 cleanup 함수 호출 마운트 시 하는 작업→ props 로 받은 값을 컴포넌트의 로컬 상태로 설정→ 외부 API 요청→ 라이브러리 사용→ setInterval 반복작업, setTimeout 작업 예약 언마운트 시 하는 작업→ setInterval, setTimeout 등록한 작업들 clear→ 라이브러리 인스턴스 제거 deps특정 값 넣기→ 컴포넌트가 처음 마운트 될 때와 지정한 값 바뀔 때.. [2024-2 React.js 스터디] 윤아영 #2주차 1. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기1) deps가 비어있을 때( * deps는 useEffect의 두 번째 인자를 의미한다. )import React, { useEffect } from 'react';function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); 위 코드에서 return() => { 여기에 쓰여진 명령어들은 컴포넌트가 사라질 때 실행된다. }return 앞에 쓰여진 명령어들은 컴포넌트가 나타날 때 실행된다.(지금은.. [2024-2 React.js 스터디] 김지수 #2주차 useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 마운트 / 언마운트UserList.jsimport React, { useEffect } from 'react';function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.i.. [2024-2 React.js 스터디] 이서영 #1주차 개념정리DOM → 원본 HTML 문서의 객체 기반 표현 방식 → 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용 → 원본 HTML 문서 형태와 비슷하지만 차이점 존재항상 유효한 HTML 형식자바스크립트에 수정될 수 있는 동적 모델가상 요소 포함 X보이지 않는 요소 포함 DOM의 개체 구조는 "노드 트리"로 표현 → 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무같은 구조ex) Hello, world! How are you? 출처 : https://wit.nts-corp.com/2019/02/14/5522 DOM은 정확히 무엇일까? | WIT블로그최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념.. [2024-2 React.js 스터디] 윤아영 #1주차 1. 리액트가 만들어진 계기어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하면 코드가 복잡해지는 문제가 있다.리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링하고 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시키는 방법으로 이 문제를 해결하였다.2. 새 프로젝트 만들기터미널에서 다음 명령어를 실행한다.$ npx create-react-app begin-react #(프로젝트명) 해당 디렉터리에 들어간 다음 명령어를 실행한다.$ yarn start # 혹은 npm start3. 리액트 컴포넌트 만들기리액트 컴포넌트를 만들 때에는 다음 코드가 필요하다... [2024-2 React.js 스터디] 김지수 #1주차 리액트는 어쩌다 만들어졌을까?리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었습니다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜줍니다. 이를 통하여, "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 되었습니다.리액트 컴포넌트App.jsimport R.. 이전 1 2 3 4 5 ··· 12 다음
