Iriton's log

참고 자료 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무velopert.com 이제는 배열 내부의 데이터를 제거하고 수정해 보자.  데이터 제거const arr = [1, 2, 3, 4, 5];array.silce(0, 2).concat(array.slice(3, 5))[ ...array.slice(0, 2), ...array.slice(3, 5) ];arr 배열에서 3을 없애고 싶으면 slice와 concat을 이용하거나 배열 전개 연산자를 이용해서 구현할 수 있지만단순히 값이 3인 ..

참고 자료 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무velopert.com  React에서는 state의 값을 직접 수정하면 안 된다. 불변성 유지 (데이터의 원본이 훼손되는 것을 막는 것) 때문인데 내장 함수(push, splice, unshift, pop) 배열 자체를 직접 수정하면 안 돼서 기존의 배열에 기반하여 새 배열을 만드는 함수(concat, slice, map, filter)를 사용해야 한다.  데이터 추가import React, { Component } from "r..

참고 자료 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무velopert.com  전화번호부 프로젝트 실습을 위해 새 프로젝트 생성  첫 번째 컴포넌트, PhoneForm 만들기// file: src/components/PhoneForm.jsimport React, { Component } from 'react';class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setS..

참고 자료 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무velopert.com LifeCycle API란 컴포넌트가 우리 브라우저에서 나타날 때, 사라질 때, 그리고 업데이트 될 때 호출되는 API이다.  컴포넌트 초기 생성constructorconstructor(props) { super(props);}컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 함수가 호출된다. componentDidMountcomponentDidMount() { // 외부 라이브러리 연동: D3,..

참고 자료 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무velopert.com  새 컴포넌트 만들기src/component/test 폴더를 생성하여 MyName이라는 컴포넌트를 만든다.import React, { Component } from 'react';class MyName extends Component { render() { return ( 안녕하세요! 제 이름은 {this.props.name} 입니다. ); }}export de..

참고 자료 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무velopert.com재사용 가능한 컴포넌트로 분리 작성함으로써 프로젝트의 유지보수성을 우수하게 한다.  App.jsimport React, { Component } from 'react';파일에서 JSX를 사용하려면 필수적으로 React를 import 해야 한다.리액트와 그 내부의 Component 불러온다. import logo from './logo.svg';import './App.css';webpack을 사용하여 파일을 불..

스터디 참고 자료https://youtube.com/playlist?list=PLuHgQVnccGMBxNK38TqfBWk-QpEI7UkY8&si=l0cktZbzZIUvhKWS JavaScript Immutability www.youtube.com   불변성이란 데이터 원본이 훼손되는 것을 막는 것이다.데이터를 불변하게 다루면 데이터들 간의 간섭으로 인한 버그의 가능성을 획기적으로 낮출 수 있다.또, 데이터가 변경되었는지 여부를 쉽게 체크할 수 있으며 특히 CRUD(Create, Read, Update, Delete) 작업 시, 불변성을 보장하는 것이 매우 중요하다.  이름에 대한 불변함const를 사용하여 이름을 불변하게 만든다.const를 사용하게 되면 선언한 변수를 수정할 수 없게 되며, 수정을 시도..