developer_jju's_day

안녕하세요 jju_developer입니다. 오늘은 react-bootstrap!! 에 대해서 알아보겠습니다. 📌 react-bootstrap 이란 • react 에서 Bootstrap5를 사용 가능하도록 개발한 라이브러리입니다. • 각종 레이아웃, 버튼, 입력창, 테이블 등을 미리 디자인을 정의해 두어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하여 사용 가능합니다. 📌 reactstrap 사용법 • react Bootstrap 문서에서 참고해 npm에서 react-bootstrap 라이브러리를 설치합니다. • npm install 은 yarn add 와 동일하기 때문에, yarn은 yar..

안녕하세요 JJU_developer입니다. 이번시간에는 함수형 컴포넌트와 클래스형 컴포넌트 그 둘의 차이점에 대해서 알아보도록 하겠습니다~~!!!! React에는 컴포넌트를 선언하는 방식 1. 클래스형 컴포넌트(class component) 2. 함수형 컴포넌트(function component) React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있습니다. 👉 클래스형 컴포넌트 1. class 키워드가 반드시 필요합니다. 2. Component로 상속받아야 합니다. 3. render() 메소드가 반드시 필요합니다. 4. state, Life Cycle 사용 가능합니다. 5. 메모리 자원이 함수형 컴포넌트에 비해 많이 사용합니다. 6. 컴포넌트가 복잡하며, 로직의 재사용이 힘..

안녕하세요 jju_developer입니다. 앞서서 배운 props에 이어서 setState에 대해 알아보겠습니다!! setState()란? setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링 됩니다. 리액트(React)의 state는 컴포넌트 내부의 변경 가능한 값이라고 했습니다. 클래스형 컴포넌트는 state를 사용하고, 함수형 컴포넌트는 useState 훅(클래스 내부에서는 동작 X)을 사용합니다. 그렇다면 일반적으로 사용하는 변수를 두고 왜 state를 사용해서 값을 관리할까요? 이는 state가 갖는 특성 때문인데요. 바로 값이 변경되면 리렌더링(Re-rendering)이 발생하기 때문입니다. 따라서 값이 변화함에 따라 실시간으..

안녕하세요 jju_developer입니다. 이번시간에는 컴포넌트의 props라는 개념에 대해서 알아보겠습니다. props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다. props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다. props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없으며, 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다. ^^ 예제 1 props import React, { Component } from 'react'; class R017_Props extends Component { render() { let props_value = this.props...

안녕하세요 jju_developer입니다. 수업 도중 어제 배운 생명주기 사이클을 보았는데 이해가 잘 가지 않아서 다시 정리를 해보았습니다. 리액트의 핵심 = 컴포넌트 그리고 이 컴포넌트는 생명주기를 가집니다. Component는 생성(mount)-> 갱신(update) -> 소멸 (unmount)라는 과정을 거치게 됩니다. 이러한 각각의 과정에서 특정하게 정한 함수 = 메서드 를 실행하면서 이 함수들을 생명주기 함수 또는 생명주기 메서드라고 하는 것 입니다. Component 순서 자세히 보기 컴포넌트를 생성할 때 위 이미지처럼 순서대로 진행이 됩니다. 1. constructor() 2. getDerivedStateFromProps() 3. render() 4. componentDidMount() 설명..

안녕하세요 jju_developer입니다. 지난 시간에 이어서 이번에는 템플릿 문자열 사용하기에 대해서 알아보겠습니다. 009 템플릿 문자열 사용하기 import React from 'react'; import './App.css'; import Es6 from './R009_Es6' function App() { return ( 009 템플릿 문자열 사용하기 jju Start React 200! CSS 적용하기 ); } export default App; 기존의 문자열을 사용할 때에는 문자열+문자열을 했지만 import React, { Component } from 'react'; class R009_Es6 extends Component { constructor(props) { super(props)..

안녕하세요 jju_developer입니다. 지난 시간의 노드 js에 이어서 4번째의 componentDidMount에 대해 알아보겠습니다. 노드JS 개념 이해하기 + 다운로드 (npm과 yarn이란?) 노드 JS란 무엇일까? 안녕하세요 jju_developer입니다. 오늘부터 대망의 react에 대해서 공부를 하게되었습니다! Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 말이 참 어렵죠? Java jju240.tistory.com 2장 yarn css, 함수형, 클래스형 component 예제, 생명주기 함수 render() 사용하기 안녕하세요 jju_developer입니다. 이어서 리엑트 수업에서 배운 내용을 정리하여 공유드립니다. cd 001로..

안녕하세요 jju_developer입니다. 이어서 리엑트 수업에서 배운 내용을 정리하여 공유드립니다. cd 001로 이동 다운로드 후, yarn start를 칩니다. * yarn start - 우리가 작성한 코드를 직접 확인해 볼 수 있게 실행하는 명령입니다. 코드로 보겠습니다. import React from 'react'; function App() { return ( Start React 200! HTML 적용하기 ); } export default App; ---------------------------------------------------- import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; ..

노드 JS란 무엇일까? 안녕하세요 jju_developer입니다. 오늘부터 대망의 react에 대해서 공부를 하게되었습니다! Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 말이 참 어렵죠? Java 언어가 모든 OS 운영체제에서 Virtual Machine (VM) 환경 안에서 Runtime 이 구동되듯이 Node.JS 는 웹브라우저에 종속적인 자바스크립트에서 외부에서 실행할 수 있는 Runtime 환경을 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공하게 됩니다. 이것을 Node.JS 라고 정의할 수 있습니다. 웹 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발을 할 수 있지만! 프로젝트의 규..