WebMaster

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 //단위를 생..

JSX 문법 3) IF문 대신 조건부 연산자 JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용해야 된다. function App() { // const name = '리액트'; const name = '리웹트'; return ( {name === '리액트' ? ( 리액트입니다. ) : ( 리액트가 아닙니다. )} ); } export default App; 4) AND 연산자(&&)를 사용한 조건부 렌더링 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않을 때 사용 null을 렌더링 하면 아무것도 보여주지 않는다. &&연산자를 사용하면 더 짧은 코드로 조건부..

JSX 문법 1) 감싸인 요소 컴포넌트에 여러 가지 요소가 존재한다면 반드시 부모 요소 하나로 감싸야한다. virtualDOM에서 컴포 너트 변화를 감지해낼떄 효율적으로 비교 가능하게 컴포넌트 내부는 하나의 DOM트리구조로 이루어져야 되는 규칙이 존재하기 때문 반드시 div요소를 사용하지 않고 리액트 v16이상부터 도입된 Fragment기능 사용해도 된다. fragement는 이렇게 빈 값으로도 사용이 가능하다. function App() { /************ 변 환 ************/ /* return ( //에러 코드 why? JSX는 요소 여러개가 부모요소 하나에 감싸져 있지 않기 떄문 리액트 안녕 잘 동작하니? ); */ /**** 방법 1 ***/ /* return ( 리액트 안녕 ..