minXD's blog

전체적인 Logic 데이터 입력 PhoneForm 에서 이름, 전화번호를 입력받아 App 으로 전달 App 에서 배열형태로 데이터를 추가하여 상태값으로 저장 화면에 출력 App 에서 PhoneInfoList 호출 (번호목록 state를 props로 전달) PhoneInfoList에서 전달받은 목록을 JSX(요소마다 PhoneInfo 호출)로 변환하여 출력 함수형 컴포넌트의 state 변경 시 replace되는 이슈 전개연산자 공식 문서 발최 클래스 컴포넌트의 setState 메서드와는 다르게, useState는 갱신 객체(update objects)를 자동으로 합치지는 않습니다. 함수 업데이터 폼을 객체 전개 연산자와 결합함으로써 이 동작을 복제할 수 있습니다. setState((prevState) =>..

React Hook useState const [color, setColor] = useState(""); useState은 길이가 2인 배열을 반환한다. 첫번째 요소는 state, 두번째 요소는 state을 변경시키는 함수(modifier)이다. useState의 인자는 state의 초기값이다. modifier의 이름은 관습적으로 {set+state의 이름} 이다. (camerCase) state의 값을 styled-component로 전달하기 JSX 태그에 state값을 props로 전달 const Pallete = styled.div` width: 700px; height: 700px; border: 1px solid black; background: ${(props) => props.color};..

2일차 리액트에서 다루는 데이터는 props와 state가 있다. props 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트에서는 props 수정 불가. // MyName.js import React, { Component } from "react"; class MyName extends Component { render() { return 안녕하세요! 제 이름은 {this.props.name} 입니다.; // this.props을 통해 props 값 참조 } } export default MyName; // App.js import React, { Component } from "react"; import MyName from "./MyName"; class App extends Compon..

CRA을 통한 프로젝트 생성 npx create-react-app my-app cd my-app npm start (or yarn start) npm이 아닌 npx를 사용하는 이유 : npm을 이용해 전역 설치를 할 경우 최신버전으로 업그레이드를 수동으로 해줘야 한다. 특히 React는 업데이트가 매우 빈번하기 때문에 npm으로 설치할 경우 버전관리가 어렵다. 하지만 npx는 최신버전의 CRA를 일시적으로 설치 후 실행한 다음 바로 삭제시키기 때문에 CRA에 대한 버전 관리를 할 필요성이 없어진다. JSX 문법 열린 태그는 반드시 닫아줘야 함 ex) br, input 등을 포함한 모든 태그 두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸져야 함 Hello Bye { /* 또는 를 사용*/ } 자바..