React - State & Props

State와 Props를 알기 전에 Hook에 대하여 먼저 알아보자!

 

React Hooks

• 리엑트 v16.8부터 새롭게 도입된 기능으로써 과거에는 클래스형 컴포넌트를 사용하였다. 클래스의 사용은 코드의 재사용과 구성을 어렵게 만들었으며 Reloading의 신뢰성을 떨어뜨리는 단점이 존재하였다.
• 따라서 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있는 훅이 탄생하였으며 대표적으로 useState와 useEffect를 사용하여 lifecycle과 연동 같은 기능을 사용 가능하게 함으로써 리엑트에서 가장 중요한 기능 중 하나가 되었다.

 

Before Using Hooks

• 훅은 함수 컴포넌트 내에서 항상 최상단에 호출해야 한다.
• 리엑트 함수 컴포넌트 내에서만 훅을 호출해야하며, 일반 자바스크립트 함수에서는 훅을 호출할 수 없다.

 

State

• 컴포넌트 내부에 가지고 있는 컴포넌트의 상태 값이다.
• 화면에 보여주고 있는 현재 UI 상태라고 이해하면 쉽다!

 

Why use State

• 원하는 값을 할당한 변수를 사용해도 되는데 왜 state를 사용할까? 
  • 변수안에 있는 내용은 수정이 필요할 경우 html코드를 직접 수정해야한다. 하지만 state는 변경이 되면 자동으로 리랜더링(rendering)이 된다.
  • 즉 state값이 변경된 상태로 다시 코드가 실행된다는 뜻이다.
  • 따라서 글 제목이나 로고같은 자주 변하지 않는 것에는 굳이 state를 사용할 필요가 없으며, 자주 변경이 될거 같은 html을 state로 정의하는 것이 현명한 방법이다!
  • state 함수는 기존 데이터와 신규 데이터가 동일하면 변경되지 않는 특징이 있다.

 

How to use State

1. 선언부터 하자!

예시1) state 선언

 

2. 변수에 담자!

예시2) state 변수에 값 입력

• 여기서 사용되는 a는 state에 보관한 자료이며, b는 state 변경을 도와주는 함수이다. 즉 b는 a를 변경하기 위해서 사용되는 함수이다. a를 다른 값으로 변경하려는데 계속해서 어떠한 값을 할당하더라고 아무일도 발생하지 않는다.

 

2-1. state 사용 컨밴션

예시3) state 사용 컨밴션

• 예시2와 조금 다른 점을 확인할 수 있다. 변수이름을 잘 정하는 것은 코드의 가독성을 높이기 때문에 a가 아닌 예시3에서의 title과 같은 의미를 가지고 있는 변수명을 정해주는 것이 좋다. 또한 b의 자리에는 setTitle을 사용하였는데 b자리에는 a를 변경하기 위해서 사용하는 함수이기 때문에 set+변수명을 붙여주는 것이 국롤이다!
• 또한 useState()에 배열, 문자열, 불린(boolean), 객체, 상수가 사용될 수 있다는 점을 기억하자!

 

3. 중괄호{ } 안에서 사용!

예시4) {state}사용

• 예시4와 같이 state를 다 만들었으면 html 코드안에서 중괄호 { } 사이에 입력하면 된다.
• 예시4에 작성한 코드의 결과로는 사는곳은 김해장유 텍스트가 h4 크기에 맞춰 출력되게 된다. 

 

Props

• Properties(속성)의 줄임말이다.
• 부모 컴포넌트로부터 전달 받은 데이터이다!
• 문자열, 함수, 변수, state 값(모든 데이터 타입)이 전달이 가능하다.
• 부모 컴포넌트에 있는 state 데이터를 자식 컴포넌트에서 사용하고 싶을 경우 자주 사용되기도 한다.

 

How to use props

 

1. props 데이터 전달!

예시5) props 전달

• 다음 예시는 부모 컴포넌트에서 자식 컴포넌트를 선언하고 props 데이터를 전달하고 있는 예시이다.
• 전달하고자 하는 데이터의 이름을 작성하고 중괄호 안에 전달되는 데이터의 이름을 입력해주면 된다.

 

2. 자식 컴포넌트에서 get props

예시6) 자식컴포넌트 props 사용

• 자식 컴포넌트의 인자로 props를 받고 props.데이터명의 구조로 props를 사용하면 된다.
• 예를 들어 예시5번에서 데이터들이 전달되었으면 props.comment, props.setLike 이러한 형식으로 사용하면 된다!!
• props는 반드시 부모에서 자식에서만 전송이 가능하다!!!

 

Restructuring(구조 분해 할당)

• 구조 분해 할당은 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있게 한 자바스크립트의 표현식이다.
• 다음 예시를 통하여 쉽게 이해해보자.

예시7) 구조 분해 할당

• 예시6에서는 전달받은 데이터를 props.데이터명, props를 붙여서 사용했다면 구조 분해 할당을 통하여 전달받은 데이터를 props대신 중괄호 { } 안에 전달받는 데이터 명을 그대로 작성하여 사용하였다. 따라서 {props.데이터명}의 구조가 아닌 {데이터명}을 사용할 수 있다는 의미이다.

 

 

*자식 컴포넌트에서 props를 이용해서 state를 바꾸면 부모 컴포넌트도 같이 랜더링 되어 같이 변경이 된다!

 

 

 

 

React programming tips

• 리엑트를 사용해서 공부하다가 배운 몇 가지 팁이다!
• /* eslint-disable */  : 다음 명령어를 통하여 console창에 계속해서 뜨는 warning 메세지를 없앨 수 있다.
• JSX 문법 중 중괄호 { } 문법을 데이터 바인딩이라고 한다!
• onClick = { } 과 같은 이벤트의 중괄호에는 반드시 함수가 사용되어야 한다!