WebMaster

State값을 변경할 때에는 반드시 setState혹은 useState을 셰터 함수를 사용해야 한다. 잘못된 예시 //클레스형 컴포넌트의 잘못된 예시 this.state.number = this.state.number+1; this.state.array = this.array.push(2); this.state.object.value = 5; //함수형 컴포넌트의 잘못된 예시 const [object,setObject] = useState({a:1,b:1}); object.b = 2; 배열이나 객체를 업데이트해야 될 경우에는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후 그 사본의 상태를 setState/ 셰터 함수를 통해 업데이트한다. //객체 다루기 const object = {a:1,b..

리액트 16.8 이후 버전부터는 함수형 컴포넌트에서 State를 사용할 수 있다. 16.8 버젼 이후부터는 useState를 사용해서 state를 사용할 수 있다. useState를 사용하기 위해서는 Hooks를 사용하게 되는데 Hooks중 한 가지가 useState다. 배열 비구조화 할당 Hooks를 알기 전에 알아야될 문법 배열 안 값을 쉽게 추출 해줄수 있는 문법 const array = [1,2]; const one = array[0]; const two = array[1]; // 배열 비구조화 할당 const array = [1,2]; const [one,two] = array; UseState 사용하기 useState함수의 인자에 상태의 초깃값을 넣어준다. useState에서는 반드시 객체 형..

State를 Constructor에서 꺼내기 State의 초기값을 Constructor메서드를 선언하지 않고도 초깃값을 설정할 수 있다. state = { ... ,...}; 방식으로 초기값 설정이 가능하다. import React, { Component } from "react"; class Counter extends Component { state = {//constructor를 선언하지 않고도 state 초기값 설정 가능 number : 0, fixedNumber : 0 } render(){ const {number,fixedNumber} = this.state; return( {number} 바뀌지 않는 값 : {fixedNumber} { this.setState({number: number+1..

클래스형 컴포넌트의 State 컴포넌트에 State를 설정할 때는 constructor 메서드를 작성하여 설정한다. 반드시 super(props)를 호출해야 한다. 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다. 그 후, this.state = { ... }로 값을 세팅해 준다 컴포넌트의 state는 객체 형식이어야 한다. render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 된다. button안에 props로 onClick을 넣었는데 이를 이벤트라고 한다. 함수 내부에서는 this.setState라는 함수를 사용해서 state값을 바꿔준다. Counter 컴포넌트를 App에서 불러와 렌더링 한다. Counter.j..

State는 컴포넌트 내부에서 바뀔 수 없는 값을 의미한다. props 같은 경우 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며(현재는 MyComponent.js에서 값을 수정할 수 없고 , 부모인 App.js에서 props값을 바꿀 수 있다) 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할수 있다.(매개변수로 받아 읽기 전용으만 사용한다.) State의 종류 클래스형 컴포넌트가 지니고 있는 State 함수형 컴포넌트에서 UseState라는 함수를 통해 사용하는 State

비구조화 할당 문법을 통해 Props 내부 값 추출하기 이전까지는 props 값을 조회하기 위해서는 props키워드를 앞에 붙여서 꺼냈다. ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출 MyComponent 수정 import React from "react"; //방법 1 const MyComponent = props => { const { name, children} = props; return ( 안녕하세요 제 이름은 {name}입니다. children값은 {children}입니다. ); }; export default MyComponent; 객체에서 값을 추출하는 문법이다(함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 추출 가능) import React from "react";..

properties의 줄인표현으로 컴포넌트 속성을 설정할때 사용하는 요소이다. 해당 컴포넌트에서 불러와 부모 컴포넌트에서 설정할 수 있다(현재는 App컴포넌트) JSX 내부에서 props 렌더링 MyComponent 컴포넌트를 수정해서 name 이라는 props를 렌더링 하도록 설정 props값은 컴포넌트 함수의 파라미터로 받아 와서 사용한다. props를 렌더링 할때에는 JSX 내부에서 {} 기호로 감싸주면 된다. import React from "react"; //MyComponent.js const MyComponent = (props) => { return ( 안녕하세요 제 이름은 {props.name}입니다. ); }; export default MyComponent; 컴포넌트를 사용할 때에는 ..

클래스형 컴포넌트 컴포넌트를 선언하는 방식은 함수형과 클래스형 2가지가 있다. 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있다. 임의 메소드를 정의할 수 있다. ES6이전에는 자바 스크립트에 Class가 없었다. -> prototype문법을 이용했다 render함수가 반드시 있어야 되고 그 안에서 보여줘야 될 JSX를 반환하여야 된다. 장점 : state와 라이프 사이클 API의 사용이 가능하다. -> 함수형 컴포넌트도 리액트 16.8v 이 나오면서 해결 단점 : 선언이 어렵다, 메모리 자원이 함수형 컴포넌트보다 크다. import React, {Component} from 'react'; class App extends Component{ render(){ const ..

ESLint 문법 검사 도구이다. 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해 준다. 해당 에러가 문제 탭과 코드에 바로 나타난다(문제 탭이 없을 경우 보기-> 문제 클릭) 노란색 줄은 무시해도 되지만 빨간색 코드는 반드시 수정해야 된다(수정 안 하면 페이지가 브라우저에 안 나온다) Pretter 코드 스타일 자동 정리 도구이다. 들여 쓰기가 안되어 있는 코드들을 f1을 누르고 format검색 후 enter 클릭식 코드가 정렬된다. 세미콜론이 빠진 곳도 자동 추가되고 작은따옴표는 큰 따옴표로 변경해준다. Prettier는 코드 스타일을 사전에 설정 가능하다. 저장할 때 자동으로 코드 정리가 가능하다. 파일 -> 기본 설정 -> 설정 이동 for..

6) 인라인 스타일링 DOM 요소에 스타일을 적용할 때에는 문자열 형태가 아니라 객체 형태로 넣어야 한다. 만약 스타일 이름 중 background-color처럼 '-'가 포함될 경우 카멜 표기법으로 작성 바로 스타일을 지정하고 싶다면 style={{스타일1 : 스타일 값 1, 스타일 2 : 스타일 값 2}} 방식으로 작성한다. function App() { const name = '리액트'; /* const style = {//background-color는 카멜 표기법으로 표기 backgroundColor : 'black', color : 'aqua', fontSize: '48px',//font-Size fontWeight : 'bold',//font-weight padding : 16 //단위를 생..