4일차

React에서 핵심 내용 이해하기📚

4일차는 리액트 예습이다. 과제 같은 것이 있는 게 아니라 미리 공부할 내용을 예습하고 블로그로 남기고 싶어서 작성하는 것이다. 강의나 다양한 블로그를 보면서 공부하고 이해한 내용들을 정리하는 시간으로 꽤나 좋은 시간이다.

이번에 이해한 부분은 props와 State이다. props는 부모와 자식 컴포넌트 간에 데이터를 전달하는 속성이고, State는 컴포넌트의 상태를 나타내는 객체이다. 리액트가 갖고 있는 이 두 가지 특징에 대해 이해한 내용을 추가하여 기록하려 한다.

props

props는 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터를 전달해주는 속성이다. 우선 부모 컴포넌트와 자식 컴포넌트에 대해서 정의를 하면 아래의 코드와 같다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = props => {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent />
    </div>
  );
}

export default ParentComponent;

위의 코드는 ParentComponet를 정의한 컴포넌트다. 말 그대로 부모 컴포넌트로, 이 부모 컴포넌트는 자식 컴포넌트를 가져와 JSX로 사용하고 있다.

부모는 자식을 품고 있다라고 생각하면 간단하게 이해할 수 있다.

그래서 이런 관계에서 props 속성으로 부모가 갖고 있는 데이터를 자식으로 보낼 수 있다.

예시

아래 코드는 부모 컴포넌트다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = props => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <ChildComponent name={name} age={age} />
    </div>
  );
}

export default ParentComponent;

아래 코드는 자식 컴포넌트다.

// ChildComponent.js
import React from 'react';

const ChildComponent = props => {
  return (
    <div>
      <p>Name: {props.name}</p> // 'John'
      <p>Age: {props.age}</p> // 30
    </div>
  );
}

export default ChildComponent;

이렇게 자식 컴포넌트에선 {props.name}와 {props.age}를 통해 부모 컴포넌트가 갖고 있던 데이터를 받아 렌더링이 가능하다. 이는 리액트에서 핵심 기능 중에 하나로 컴포넌트 간에 데이터를 유용하게 전달할 수 있다.

State

State는 컴포넌트의 상태를 나타내는 객체다. 컴포넌트의 상태가 뭔지 처음에는 이해하기 어려웠다. 도대체 어떤 걸 상태라 하는지 이해하지 못했지만, 하나의 객체라고 보니까 나름 이해할 수 있었다.

컴포넌트 내부에서 생기는 동적인 동작(클릭, 데이터 움직임 등)

이렇게 보니, 이해가 가능했다. 예시를 통해 접근하면 다음과 같다.

예시

import {useState} from 'react';

const User = props => {
	const [username, setUsername] = useState('');
	
  	const usernameChangeHandler = event => {
    	setUsername(event.target.value);
      	console.log(username);
    }
  
  	return (
    	<form>
      		<input id='username' type='text' onChange={usernameChangeHandler}/>
      	</form>	
    );
};

export default User

위의 코드는 username을 입력 받으면 콘솔에 username을 띄우는 아주 간단한 State 예시이다. State를 사용하려면 react에서 useState를 import를 받아야 한다.

그리고 username을 설정한 줄처럼 useState()를 설정해야 한다. setUsername을 통해 상태를 저장하고 username을 통해 보여준다. 중요하게 알아야 하는 부분은 컴포넌트의 상태를 저장한다는 점을 알고 넘어가면 될 거 같다.

정리하기

작지만 큰 핵심🆕

이번 리액트 예습을 통해 많은 걸 안 기분이 든다. 중요한 개념에 대해 공부했기 때문에 더 이렇게 느끼는 것 같다. 이게 아직 시작이라는 생각에 두려움과 떨림이 공존한다. 앞으로 어떤 것들로 React가 날 맞아줄지... 열심히 해봐야겠다.

내일이면 한 주의 마무리기 때문에 한 주 정리와 함께 이번 주도 잘 마무리하여 앞으로 남은 9주도 하나하나 허무함보다는 뜻깊은 하루로 만들어 나가야겠다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프