# useEffect useEffect(() => {} ) 어떤 컴포넌트가 Mount(화면에 첫 렌더링) → Update(다시렌더링) → Unmount(화면에서 사라질때) 되었을 때 특정작업을 처리할 코드를 실행시켜주고 싶다면 사용 인자로 콜백함수를 받는다. (콜백함수란 다른함수의 인자로 전달된 함수를 의미) 콜백함수 내부에 우리가 원하는 작업을 처리할 코드를 작성해주면 된다. useEffect는 두가지 형태만 알고 있으면 된다 1. useEffect(() => { 작업.... }); 인자로 하나의 콜백함수만 받는 것 컴포넌트가 렌더링 될때마다 매번 콜백함수가 실행됨 컴포넌트가 맨처음 화면에 렌더링될때 한번, 컴포넌트가 다시 렌더링 될때 한번 실행됨 2. useEffect(() => { 작업....}..
# useRef const ref= useRef(value) {current : value} 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해준다. 우리가 정해준 초기값은 ref안에 current값에 저장된다. 오브젝트는 수정이 가능하기 때문에 언제든 우리가 원하는값으로 변경해줄 수 있다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 즉 컴포넌트가 계속 렌더링 되어도 언마운트 되기 전까지는 값을 유지할 수 있다. # useRef 는 언제 사용이 될까? 1. 저장공간 state와 비슷하게 어떤 값을 저장하는 저장공간으로 사용된다. state의 변화 → 렌더링 → 컴포넌트 내부변수들 초기화 ☞ 이런경우 우리가 원치않은 렌더링 때문에 곤란해질때가 있다. state 대신 re..
# React hooks란? 2019.06 정식 출시된 기능 class형 컴포넌트의 길어지는 코드 길이 문제 중복 코드, 가독성 문제 등등을 해결하기 위해 등장 # useState const [state, setState] = useState(초기값); state란? 컴포넌트의 상태 예를들어 현재 time = 5시라면 useState는 이 시간을 간편하게 생성하고 업데이트 시켜준다. state의 생성과 동시에 가져야 할 초기값을 useState에 인자로 넣어주면 state와 setState라는 두가지요소를 배열형태로 return 해준다. 현재 상태값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때는 setState라는 변수를 이용해서 변경시켜줄수 있다. state, setState라는 ..
# 호이스팅 이란? 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 소스코드의 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다. 자바스크립트 엔진은 선언들이 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 쉽게 말해 자바스크립트 엔진이 코드를 실행하기 전 선언문을 끌어올리는 것을 말한다. 정확히 말하자면 선두도 끌어 올려진 것 처럼 동작한다. 모든 식별자(변수,함수, 클래스 등)은 호이스팅 된다. # 변수 호이스팅 변수는 3단계에 걸쳐 생성된다..
# Styled Componens styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com CSS파일을 따로 만들지 않고 자바스크립트에서 CSS를 사용하게 해주는 라이브러리 CSS-JS 라이브러리 중에 제일 유명함 스타일이 첨부되는 현 컴포넌트에만 영향을 주고 다른 컴포넌트에는 영향을 미치지 못한다. 단점은 자바스크립트내에서 작성하기 때문에 코드가 보다 복잡해질 수 있다. 1. 홈페이지 접속 npm install --save styled-components 설치 2. 사용할 파일에 가서 임포트 ..
리액트 공식사이트 Getting Started – React A JavaScript library for building user interfaces reactjs.org 리액트 베타사이트 React Docs Beta A JavaScript library for building user interfaces beta.reactjs.org Create React App Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev TOOL VS Code Download Visual Studio Code - Mac, Linux, Windo..
