React-기본개념 정리

1. React구조 및 변수 선언

함수 컴포넌트

const Test= () => {
	JavaScript영역
    
	return(
		컴포넌트함수/JSX영역    
    )
}

return(이 안은 컴포넌트 함수영역 JSX영역 화면에 보이는 영역)

• return() 안의 한줄 이상의 코딩은 div로 묶어줘야한다.
• div로 묶어줄때 ul안에는 div를 사용할 수 없다
• 변수,함수 선언은 const [변수이름] = '[값]'
• 반환타입은 자동으로 설정된다.

2. props

!!React에서 컴포넌트간 데이터를 전달하는 방식!!

• 부모 -> 자식 컴포넌트로 전달
• 자식은 읽기만 가능(불변)
• 함수, 클래스 컴포넌트 모두 사용 가능
  함수 컴포넌트

<welcome name="Jo"/>

function parent(props){
	return <h1>Hello, {props.test}!</h1?
}
//사용

props의 특징

• 불변성: 자식컴포넌트는 원본props를 수정할 수 없다
• 재사용성: props를 통해 재사용성을 높일 수 있다. 동일 컴포넌트에 다른 props를 전달하여 재사용 가능

props.children

부모컴포넌트가 자식컴포넌트 사이에 전달한 JSX요소를 의미

3. 비구조할당

destructuring assignment

• 객체나 배열의 속성/값을 쉽게 추출하여 변수에 할당하는 문법
  props나 State에서 필오한 값을 추출할 떄 사용됨

1. props 비구조 할당

컴포넌트에 전달되는 props가 객체로 전달되는데 비구조 할당을 사용하면 props객체에서 원하는 값만 꺼내올 수 있다.

//비구조할당 X
function Test1(props){
	return(
    	<h1>
        	Hello, {props.name}!
        </h1>
    )
}
//비구조할당 O
function Test2({name}){
	return(
    	<h1>
        	Hello, {name}!
        </h1>
    )
}

useState훅의 비구조화 할당

useState비구조화 할당시 비구조화 할당을 통해 변수와 setter를 분리할 수 있다.

import {useState} from 'react'

function Test(){
	//비구조화 할당을 사용하여 state와 setState분리
    const[count, setCount] = useState(0) //count의초기값은0
    
    return(
    	<div>
        	<p>{count}</p>
            <button onClick={()=> setCount(count +1)}>
            	증가
            </button>
        </div>
    )
    
//버튼을 누르면 setCount()에 의해 count의 값이 +1되는 컴포넌트
}

useEffect훅의 비구조화할당

//비구조할당2
useEffect(() => {
	const {id, name} = user;	//user객체에서 id와 name을 비구조화 추출
    console.log(`User: ${id} / ${name}`);//``백팁을 사용하여 변수사용
}, [user]);