Coding Feature.

prop과 달리, state는 컴포넌트를 만드는 내부자를 위한 데이터. 먼저 import {useState} from 'react' 임포트 시킨다. const [mode, setMode] = useState('WELCOME'); const [id, setId] = useState(null); 상태로 사용을 위해 위와 같이 useState 함수에 'WELCOME'과 같은 초기값을 인자로 전달하여 사용한다. 이때 useState는 배열을 return하는데 index0은 상태값을, index1은 상태값 변경 위한 함수를 return해준다. const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'..

만약 사용자가 정의한 컴포넌트에서 alert 이벤트를 실행할 수 있도록 하고 싶다면, 로 작성하여 onChangeMode에서 function을 옮겨주고, function Header(props){ return {props.title} } 작성. 이때 onclick으로 쓰지 않고 onClick과 같이 대문자인 이유는 유사 HTML이기 때문에 React는 onClick으로 작성해야 하기 때문. event.preventDefault()는 태그의 기본 동작을 막고(리로드 방지), props.onChangeMode()로 함수를 실행한다. function(event) 대신 (event)=> 또는 event=>로 변경가능. (인자가 하나 밖에 없다면 괄호도 생략 가능) 만약, const topics = [ {id:1..

props 란 컴포넌트의 입력값(속성). WEB을 속성값으로 컴포넌트에 넘겨주고 싶다면 function Header(props){ return {props.title} } 함수 인자를 props로. (대부분 props라고 작성.) props는 객체. 이때 props.title을 '{', '}'로 감싸줘서 사용. 예를 들어 html css js 과 같이 리스트 작성 시, 먼저, const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] topics 배열을 선언, id, title, body 정..

사용자 정의 태그를 만드는 기능은 React 의 가장 중요한 기능. 사용자 정의 태그 만드는 법. 만약 WEB 위 내용을 사용자 지정 태그로 사용하고 싶다면. function Header(){ return WEB } 를 작성. 이떄 Header()와 같이 첫 문자는 무조건 대문자. return에 사용자 정의할 태그 내용을 그대로 작성. 사용하려면 또는 를 작성. React에서 사용자 정의 태그를 컴포넌트라고 한다. 컴포넌트는 생산성, 유지, 보수, 공유 등 기능성을 높인다.