NODE/React (4) 썸네일형 리스트형 React_Day 04 :: 리액트 컴포넌트 스타일 SCSS, SASS 1. sass, scss sass는 CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여주어 유지보수를 쉽게 해줍니다. pro-processor : 미리 CSS를 프로그래밍해서 만들어 놓는다. 컴파일을 해줘야한다. sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get eve.. React_Day 03 :: useEffect와 Hook 함수 ● useEffect 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법을 제공합니다. ● Hook 함수란? class형 컴포넌트에서 사용하던 상태값 또는 생명주기를 함수형 컴포넌트에서 사용할 수 있도록 제공되는 함수를 Hook이라고 합니다. Hook함수의 특징은 리액트 모듈에서 끄집어서 사용하는 방식입니다. ex) import, React, {useEffect} from 'react' ● useEffect(함수, 의존값이 들어있는 배열) 의존 값이 들어있는 배열이 비워있다면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출됩니다. 배열 자체가 깨끗하게 지워집니다. 컴포넌트가 사라졌.. React_Day 02 :: useRef 와 Spread에 대해서 자바스크립트를 사용할 때에는, 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector함수를 사용합니다. 리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야하는 상황이 발생하는데 이때, DOM을 선택하여 처리하는 리액트 함수 useRef를 사용하면 됩니다. useRef란 ? ● 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것입니다. useRef로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다. useRef.. React_Day 01 :: 작업환경 준비하기 1. node.js 설치 nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org >> npm init -y 2. npm 새 프로젝트 실행 >> npx create-react-app react1(프로젝트명) 컴포넌트란 ? 리액트에서 레고 조각처럼 조합하여 프로그래밍 할 수 있게 만든 모듈 단위입니다. index.js ReactDOM.render( document.getElementById('root); ); 3. ReactDOM.render 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링 하겠다는 의미입니다. "index.html"파일의 id가 root인 DOM을 .. 이전 1 다음
