developer_jju's_day

안녕하세요 오랜만에 돌아온 jju_developer입니다. 리액트 공부를 위해 맥북을 사용한 리액트 초기 설정에 대해 알아보겠습니다. 1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 웹사이트에 들어가서 노드제이에스를 깔아줍니다. 왼쪽 버전으로 설치를 한 후, 아무 폴더나 만들어서 거기서 2. 새폴더의 터미널을 열고 npx create-react-app blog 엔터 치기 npx create-react-app blog를 치고 리액트 프로젝트를 만들어봅니다. 이렇게 뜨면 성공적으로 작업 파일이 생성이 된 것입니다. 파일에 들어가 보면 blog 폴더에 기초 파일이 생성된..

안녕하세요 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() 설명..