react24 [Web] React lifecycle method,props, super(props) vs super() 반갑습니다. 슬슬 길게쓰기 힘들어지네요.. 지난번에 만든 MyComponent를 약간 수정해보겠습니다. 원하는 결과물 : 1번을 클릭하면 2번처럼 새로운 설명이 나오게 해보겠습니다. 일단 위의 결과물을 만들기에 앞서, React의 component life cycle method에 대해서 알아보겠습니다. 이걸 왜 알아야 하냐구요? 원하는 순서대로 실행을 하기 위해서는 필수랍니다. 물론 이 life cycle은 class style react에서만 유효합니다. function style은 hook을 이용한답니다. 리액트 어플리케이션에서는 컴포넌트가 만들어지고 DOM에 삽입될 때 다음과 같은 method들이 호출됩니다. 1. constructor() 2. getDerivedStateFrom.. 2021. 7. 10. [Web]React Component, ReactStrap(react용 bootstrap),export {괄호} 차이, curly braces 보통 웹페이지의 스타일을 만들때 bootstrap을 많이 가져와서 썼죠?? React에서는 부트스트랩을 쓸 수 없습니다. Why? HTML코드에 클래스를 입혀서 만들었는데, 리액트는 html 기반이 아닌 컴포넌트 기반이기 때문이죠 따라서 리액트의 규칙에 맞춰서 부트스트랩을 re-implementation 해야합니다. 하지만!! 이걸 이미 해줬답니다. reactstrap을 설치하시면 됩니다!!! 포스팅 하면서 찾아보니 react-bootstrap 도 있군요.. 아 이게 더 진짜같은데;; 쩝 .. 여기서 리액트 스트랩 쓰니까 저도 씁니다.. npm install bootstrap npm install reactstrap npm install react-popper 위의 3가지를 다운로드 받아주세요.. 2021. 7. 9. [Web] React 설치 및 내부 구조 확인하기(진입점 등등..) ** 2023.11.4에 다시 작성됐습니다. 반갑습니다! 이 글에서는 React 설치, 실행 하는 방법, React가 어떻게 화면을 그리고 있는지 확인하겠습니다. Node 설치하기 React는 library 입니다. 설치하기 위해서 npm을 이용해야 하는데요. npm을 이용하려면 일단 Node를 설치해야 합니다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트로 이동해서 가장 최신버전인 LTS로 받아주세요. 2023년 11월 기준으로 20.9 버전까지 나왔네요 ㅎㅎ React 시작하기 React를 사용하는 방법은 간단합니다. 직접 ind.. 2021. 7. 8. [WEB] React, Framework or Library? , SPA(Single Page Application) 오늘은 Framework와 Library의 차이에 대해서 알아보고, React는 어떤것일까? 에 대해서 알아보겠습니다. 그냥 리액트나 하지 뭐이리 서론이 기냐구요? 이 수업 들어보시면 진도 굉장히 빠릅니다.. 1주일치를 하루에 걸쳐서 하고 있기때문에 양이 꽤나 많답니다. 이 부분이 지루하다면 ... 안됩니다!! 굉장히 재밌답니다!! 아님말고요 ㅎ;; 왜 js library나 Framework가 필요할까? 두개의 차이를 보기에 앞서 왜 library나 framework가 필요할까? 에 대해서 먼저 알아봅시다. 어? 나는 웹 페이지 만들때 html,css, vanilla js로 잘만 만들었는데? 할 수 있습니다. 맞습니다. 없어도 충분히 웹 페이지는 만들 수 있습니다. 하지만 user와 interaction.. 2021. 7. 7. 이전 1 2 3 다음 728x90
