출처 - 리액트를 다루는 기술(김민준 지음) state를 컴포넌트 내부에서 사용하는 것 뿐만 아니라 자식 컴포넌트로 전달하여 실시간으로 다시 렌더링되도록 하는 것도 가능하다. // Greeting.js import React from 'react'; // state를 전달받기 때문에 괄호로 감싸줘야 한다 const Greeting = ({ username }) => { return {username}님 안녕하세요.; } export default Greeting; import React, { useState } from 'react'; import Greeting from './Greeting'; function App() { const [username, setUsername] = useState(''..

출처 - 리액트를 다루는 기술(김민준 지음) 리액트 16.8 이후 부터는 useState 함수를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 됐다 이 과정에서 Hooks를 사용하게 된다 state의 값을 업데이트 할 때는, state 값에 직접 접근하면 안됨. setState 또는 세터 함수로 값을 변경해야 한다 (그렇지 않으면 바뀐 값이 렌더링 X) (1) useState 사용하기 Say.js 파일을 생성한다 useState로 state 값을 바꿀 때는 useState를 통해 전달받은 세터 함수를 사용한다 // Say.js import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useS..

출처 - 리액트를 다루는 기술(김민준 지음) state와 props 비교 state와 props 모두 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있지만 역할은 다르다. state : 컴포넌트 내부에서 바뀔 수 있는 값 (컴포넌트 내부에서 값을 업데이트 가능) props : 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값 (컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다) 리액트에는 2가지 종류의 state가 있다 1. 클래스형 컴포넌트의 state 2. 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state (1) 클래스형 컴포넌트의 state Counter.js 파일을 생성한다 constructor 메서드를 사용하여 state를 생성할 수도 있지만 굳이 그러지..

출처 - 리액트를 다루는 기술(김민준 지음) props 사용하기 (5) propTypes를 통한 props 검증 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 propTypes를 사용한다. propTypes를 사용하려면 우선 import가 필요하다 // MyComponent.js import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = ({ name, children }) => { return ( 안녕하세요, 제 이름은 {name}입니다. children 값은 {children} 입니다. ); }; MyComponent.defaultProps = { name: '기본 이름', }; MyCom..

출처 - 리액트를 다루는 기술(김민준 지음) props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체 등 JS의 요소라면 제한이 없다. 주로 Component의 재사용을 위해 사용한다. props 값은 부모 컴퍼넌트에서 설정할 수 있다. 자식 컴포넌트에서는 읽기전용이다. props 사용하기 (1) JSX 내부에서 props 렌더링 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸주면 된다. // MyComponent.js import React from 'react'; const MyCompon..

출처 - 리액트를 다루는 기술(김민준 지음) 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주고, 라이프사이클 API를 이용해 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화할 때, 주어진 작업을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다 1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식에는 2가지가 있다 (함수형, 클래스형) 클래스형 컴포넌트 예시 import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트에서는 r..