useEffect 란 ? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다. 이러한...
Continue reading...reactjs
reactjs
리액트 – useState 유의할 점
콜백함수 형태로 state 업데이트 버튼을 한번 클릭했을때 state의 count가 5씩 증가하는 콜백함수를 만들어보자. 위와 같이 처리하면 콜백함수 실행시 5씩 증가할까 ? 아니다. 자바스크립트 클로저와 관련이 있는데, 콜백함수가 전달될때 현재상태를 스냅샷을 한다....
Continue reading...리액트 – 컴포넌트 스니펫 👍
미리 스니펫을 등록해두자! command + p >Snippets : configure user snippets 클릭 react 선택 아래 json 저장 위와 같이 등록해두면, rfc 입력시 파일명과 동일한 function이 자동 export default 된다 🙂
Continue reading...CSR (Client Side Rendering)
처음 yarn create react-app 이후, yarn start 로 열어보면 아래와 같이 index.html와 bundle.js 등등이 로드되는것을 확인 할 수 있다. index.html 을 살펴보면, <head>에는 seo를 위한 메타 태그들이 있고, body에는 id가 root라는...
Continue reading...리액트 기본 개념 정리 (2) – JSX / Props
JSX 정리 (HTML 차이점 정리) 처음에 리액트가 나왔을때는 위 이미지와 같이 사용하는 JSX가 없었다. 그래서 아래 이미지와 같이 사용했다. 이처럼 jsx 가 등장하고 나서, 코드가 훨씬 직관적이고 디자이너와의 협업이 쉬워졌다. 대신...
Continue reading...리액트 기본 개념 정리 (1)
리액트에 컴포넌트를 만드는 방법은 두가지가 있다. Class를 상속받아 만들기 Function 을 이용하기 컴포넌트가 state가 있고, 그 상태에 따라 컴포넌트가 주기적으로 업데이트되어야한다면 Class 컴포넌트를 쓰면 되고, 컴포넌트에 상태가 없고 정적으로 데이터가 표기된다면...
Continue reading...React 내부적으로 사용되는 툴
yarn 혹은 npm 으로 create-react-app 을 한 후, eject 해보면 여러 사용된 라이브러리를 확인할 수 있다. (eject 는 되도록 하지말자.. 다시 패키징할 수 있는 방법이 없음) 그럼 리액트 내부적으론 어떤 라이브러리들이...
Continue reading...React 란?
페이스북에서 만든 자바스크립트 라이브러리 중 하나로 페이스북 내부에서 이용되고 있을 뿐 아니라 에어비앤비, 우버, 넷플릭스, 인스타그램 등 많은 웹 어플리케이션이 리액트로 개발되어졌다. 리액트는 유저 인터페이스를 만들 수 있게 도와주는 라이브러리로써, 사용자에게...
Continue reading...