React 35

생활코딩 React 강의 (5) - State

Props와 State props : component를 조작하는 장치(사용자 입장) state : props값에 따라서 구현에 필요한 데이터들(개발자 입장) 사용자는 props를 이용해 component 조작하지만, state까지 알 필요가 없다. (우리가 스마트폰을 터치스크린, 버튼(props)으로 사용하지만 안의 메커니즘(state)은 몰라도 된다.) 코드를 작성할 때 props와 state를 철저하게 독리시켜 양 쪽에 편의성을 각자 도모하는 것을 목표로 해야 한다. Constructor() 함수 Component가 실행될 때 render()보다 먼저 실행되어 초기화를 담당한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 class App extends Comp..

React 2021.09.03

생활코딩 React 강의 (4) - React Developer Tools

React Developer Tools 리액트 공식 사이트에서 찾을 수 있지만 크롬 extention 다운로드 링크를 아래 공유한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 582858083e on 8/24/2021. chrome.google.com 설치하면 리액트 페이지에서 마우스오른쪽-검사 에서 볼 수 있는 개발자 도구에 새로운 탭이 생긴다 새로운 탭들 중 Components를 클릭해보면 ..

React 2021.09.03

생활코딩 React 강의 (3) - 컴포넌트, 다른 파일로 컴포넌트 분리하기

리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다. 이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수 있게 되어 구조를 확인하는데 편하다. Component Subject, TOC, Content라는 Component로 문서의 구조를 한 눈에 볼 수 있다. 각 Component가 정의된 App.js파일은 다음과 같이 만들 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 import..

React 2021.08.31

생활코딩 React 강의 (2) - 개발환경

React 공식 홈페이지 https://reactjs.org/ React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org Toolchain 개발환경을 위한 것들을 모아 환경을 구성해주는 도구 create-react-app 다운로드 react 개발 환경을 위해 create-react-app이라는 앱을 다운받아 사용한다. https://github.com/facebook/create-react-app GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set..

React 2021.08.26

생활코딩 React 강의 (1) - React 소개

React란? 페이스북에서 만든 UI 라이브러리 사용자가 정의한 사용자태그(Component)를 이용해 HTML을 작성할 수 있게 도와준다. React의 장점 1. 가독성이 좋다. 긴 코드 대신 나 와 같이 간단하게 표현할 수 있다. 2. 재사용성이 좋다. 다른 페이지에 같은 Component를 재사용할 수 있다. 3. 유지보수가 쉽다. Component의 내용을 수정하면 그 Component를 사용하는 모든 페이지에 자동으로 수정할 수 있다. 참고한 페이지 생활코딩 react 강의 1. 수업 소개 https://www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=1

React 2021.08.26