[TIL 2023.06.12] React Component / JSX / Props / State

💻오늘 배운 내용

본격적으로 주특기 주차에 들어섰다. 드디어!

자바스크립트도 아직 능숙하게 다루지 못하는데 걱정이 되긴 하지만 그래도 기대된다.

 

Component

JavaScript 함수와 유사하다.

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

리액트 컴포넌트는 함수형과 클래스형 두가지가 있지만 공식에서는 함수형 컴포넌트를 사용하기를 권장하고 있다.

부모-자식 컴포넌트

컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 한다.

 

JSX

JavaScript를 확장한 문법 : HTML을 품은 JS

JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법( HTML적 요소)

 

Props

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터

컴포넌트 간의 정보 교류 방법

props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향)

 

전달방식

(1) props로 전달하고 인자에서 값을 받는다.

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props) {
  return <div>{props.motherName}의 아들입니다</div>;
}

 

(2) Children

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}

export default App;

Layout 컴포넌트를 만들 때 자주 사용된다.

 

(3) 구조분해할당 

import React from "react";

function Child(props) {
	return <div>Child</div>;   	
}

export default Child;

import React from "react";
import Child from "Child";

function App() {
  const name = 'test';
  
  return (
    <Child age = {21} name = {name}>
      이름
    </Child>;
  );
}

export drfault App;

// app 함수에서 props들을 쪼개서 Child 함수로 값들을 가져온다면

// {age, name, Children} 이 구조분해할당된 객체가 인자로 들어간다.

function Child({age, name, Children}) {
    console.log(age) // 21
    console.log(name) // test
    console.log(Children) // 이름
    return <div>Child</div>;   	
}

export default Child;

props보다 명시적이라는 장점. 어떤 요소인지 바로 알 수 있다.

 

State

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미.

State를 만들 때는 useState()를 사용한다.

const [ value, setValue ] = useState( 초기값 )

 

❓발생한 이슈/고민

강의내용을 바탕으로 간단한 예제를 만들어보는 실습을 진행했다.

방금 듣고 온 내용이지만. 하얗게 지워진 내 메모리.

useState를 활용하여 위의 예제를 구현하면 된다.

 

💡해결과정

click이벤트와 submit이벤트에 적용을 할 수 있는지 보는 실습이다.

 

인풋 타입태그에 value와 onChange를 쌍으로 묶어서 적용 시켜줬는지,

id와 pw에 대한 state 값들이 타이핑 할때마다 변경이 되게 작성 해주었는지가 중요.

 

 const [id, setId] = useState('');
 const [password, setPassword] = useState('');

 먼저 두가지의 state를 설정 해둔다.

<input type="text" value={id} onChange={}/>

인풋 태그에 value와 onChange를 지정한 다음 onChange 안에 들어 갈 함수를 작성 해준다.

 

개발자 도구를 찍어보면 입력하는 값들이 event.target.value에 들어온다는 것을 알수 있다.

const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };

따라서 setId를 위와 같이 설정.

 

마지막으로

button  onClick={() => alert()}

조건에 있던 알럿까지 띄워주면 완성. 

사실 알럿 띄운 후 인풋창 초기화를 위해

setId('')

setPassword('')

도 작성 해주어야 하지만 인풋태그를 폼태그로 감싸주었다면 자동으로 초기화가 되기 때문에 필요없다.

 

🧐궁금점과 부족한 내용

강의를 듣다보니 useState 훅이라는 표현을 쓰시던데 리액트에서 hook이란 무엇인가 궁금하여 검색해보았다.

 

React Hook?

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

즉, 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.

함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공

 

📋레퍼런스

https://ko.legacy.reactjs.org/docs/hooks-intro.html