16.x 버전 이후로 생겨난 버전
예
const ArrowComponent=()=>{ return <div> 화살표 함수로 만든 컴포넌트입니다</div>};
export default ArrowComponent;
특징 : this.을 사용하지 않는다. 안에 값을 넣어 줄 때 변수로 할당하므로 const나 let 사용
props의 경우 매개변수 자리에 props를 넣어서 사용한다. return에 사용 할 때에는 props.속성명 이다.
const ArrowComponent=(props)=>{let {props 속성이름}=props;
return<div></div>} export default ArrowComponent
return 전에 위와 같이 props의 값을 따로 받아 놓으면 return 안에서 props.속성이름 대신 속성이름을 바로 넣어도 된다.
useState[16.8이후 사용가능]
let [message,setMessage]=useState("");
배열의 비구조화할당으로 사용 : 첫번째 배열의 값-현재 상태 / 두번째 배열의 값-상태를 바꾸어주는 함수
message의 내용은 useState(“”)의 값이 나오고
<p>{message}</p>
setMessage를 쓰는 곳에는 setMessage(“”)로 만들어야 한다.
<button onClick={()=>{setMessage("수정된 내용입니다")}}></button>
만약 useState에 오브젝트로 여러 변수와 값을 쓴다 해도 위와 같이 쓰면 자료형이 일치하지 않지만 바꾼 1개 값으로만 바뀐다. 그러므로 일부분에 접근을 하기 위해서 …(스프레드 연산자)를 쓴다. 해당 기능은 객체나 배열 안에 있는 값(요소)를 꺼내서 사용한다.
만약 여러개가 있고 text의 값만 바꾸고 싶다면
setMeaage({...message, text:"바꿀내용"});
처럼 써야 한다.
배열의 경우 map()을 써서 꺼내온다.
array.map((num,index)=><li key={index}>{num}</li>
배열에 {}를 해서 여러개를 넣은 경우 조금 다르다
array.map((student,index)=><li key={index}>{student.id},{student.name}</li>
와 같이 해당 배열에서 한번더 꺼내야 한다.
메서드 작성
메서드 작성도 전과 동일하다. 대신 return에 쓰일 때 this를 붙이지 않는다.
함수형 밖에서 변수를 지정하면 초기화가 되지 않는 변수가 된다. 함수형 안에 쓰면 반복하기 때문에 변수를 지정한 값으로 초기화를 반복한다.
클래스형 기본 스타일
import React,{Component}from 'react
export class ExampleComp extends Compoent{
render(){
return(
<div>ExampleComp</div>
)}}
export default ExampleComp
함수형 컴포넌트 기본형
const ExampleComp=()=>{ return <div> 화살표 함수로 만든 컴포넌트입니다</div>};
export default ExampleComp;