React 기초정리1

하얀성·2023년 8월 5일
0

😊set상태변화함수들은 어찌보면 App이란 부모 함수에서 실행해서 밖에 있는 컴포넌트에다가,
상태변화함수 변수 앞의 변수를 통해 전달하도록 만든 거구나..
useState는 app()에서 이 값들을 제어하기위해 만든 placeholder 같은 느낌인데 맞아?


ChatGPT
네, 맞습니다! useState는 React의 상태 관리 기능 중 하나로, 상태를 관리하고 해당 상태에 접근하거나 변경할 수 있는 함수를 제공합니다.

useState Hook: useState는 초기 상태 값을 인자로 받고, 배열을 반환합니다. 배열의 첫 번째 원소는 현재 상태 값을 가지고, 두 번째 원소는 상태를 변경할 수 있는 함수입니다.

const [title, setTitle] = useState(['남자코트추천','강남우동맛집','파이썬독학']);
위의 코드에서 title은 상태 값을 가지고, setTitle은 해당 상태를 변경할 수 있는 함수입니다.

상태 전달: 상태와 상태 변경 함수는 자식 컴포넌트로 전달될 수 있습니다. 이를 통해 자식 컴포넌트에서도 상태를 읽거나 변경할 수 있게 됩니다. 상태 변경 함수를 자식 컴포넌트로 전달하면, 자식 컴포넌트에서도 상태를 변경할 수 있으며, 상태가 변경되면 관련된 컴포넌트가 다시 렌더링됩니다.

<Modal modaltitle={modaltitle} setTitle={setTitle} title={title}/>
위의 코드에서는 modaltitle, setTitle, title을 Modal 컴포넌트로 전달하고 있습니다.

Placeholder 같은 느낌: useState를 통해 관리되는 상태는 해당 컴포넌트 내에서 지속됩니다. 컴포넌트가 다시 렌더링되더라도, useState를 통해 관리되는 상태 값은 유지되며, 해당 상태와 상호작용하는 UI를 쉽게 구성할 수 있습니다.
따라서 useState는 상태 관리의 중심 역할을 하며, 복잡한 UI 로직을 효과적으로 관리할 수 있도록 도와줍니다.


😘react라는 프레임워크는 정말 처음부터 끝까지 다시 act 하기때문에 useState값이 계속 변경되고,
그에 따라 함수도 다시실행되고, 모듈도 다시 실행하는 바에 따라서 값이 바뀌는걸 적용되는 걸 말하는거야?


ChatGPT
네, 맞습니다! React는 상태(state)가 변경될 때 해당 컴포넌트를 다시 렌더링합니다. 이러한 과정을 "리액팅"이라고 하며, 그래서 React의 이름이 붙었습니다. React는 상태 변화를 감지하면 Virtual DOM에 변경을 적용하고, 실제 DOM과 비교하여 변화가 있는 부분만 업데이트합니다. 이 과정을 통해 성능을 효율적으로 유지하면서 동적인 UI를 제공합니다.

위의 코드에서 useState를 사용하면 React가 상태 관리를 도와주며, 해당 상태 값이 변경될 때마다 해당 컴포넌트를 다시 렌더링합니다. 따라서 "따봉" 상태가 변경되면 그 부분만 새로 그려지게 되며, 그 과정에서 관련 함수나 모듈이 다시 실행되는 것이죠.

이 방식은 상태 관리를 명확하게 하고, 개발자가 어떤 변화가 일어났는지 명시적으로 이해하기 쉽게 만들어 줍니다. React의 이러한 특징은 많은 개발자들에게 인기를 얻게 해, 현대 웹 개발에 널리 사용되는 프레임워크 중 하나로 자리잡게 되었습니다.


초반의 깊지 않은 내용을 더 빨리 이해하도록 돕는 수단인 챗gpt가 나와서 정말 다행인듯싶다.

profile
기적을 한웅큼 품은 js러버

0개의 댓글