React에서 상태를 상위 구성 요소로 다시 전달
훌륭한 개발자를 평균에서 돋보이게 하는 한 가지는 깨끗하고 형식이 좋은 코드를 작성하는 능력입니다.
이것이 바로 코더가 한 구성 요소 내부에서 정보를 저장하고 작업을 수행한 다음 다른 구성 요소가 데이터에 액세스하여 사용할 수 있도록 하는 React 기능 뒤에 있는 두뇌입니다. 이것이 React의 자식 구성 요소와 부모 구성 요소 간의 관계입니다.
상위 구성 요소 또는 원래 구성 요소에 이미 처리할 작업이 있습니다. 상위 구성 요소에 데이터를 교체, 업데이트 또는 추가하기 위해 다른 프로세스를 수행하려는 코더는 이를 수행하기 위해 하위 구성 요소를 생성합니다.
개발자가 부모에게 여러 데이터를 전달하려는 경우도 있습니다. 여러 자식 구성 요소를 만드는 것도 이 작업을 수행하는 이상적인 방법입니다.
이렇게 하면 상위 구성 요소가 더 적은 코드로 더 짧고 깔끔해집니다.
콜백 함수를 사용하여 부모 구성 요소에 데이터 반환
callback 함수는 해당 함수의 작업이 처리되면 함수를 호출할 수 있는 React 개념입니다. 자식 구성 요소의 함수를 부모로 다시 호출하는 간단한 방법입니다.
터미널에서 새 프로젝트를 만드는 것으로 시작하겠습니다. npx create-react-app illustrationone을 입력합니다.
프로젝트가 생성되면 편집기의 폴더로 이동하여 src 폴더로 이동하여 Child.js라는 새 파일을 만듭니다. 예제에서 App.js 및 Child.js로 작업합니다.
App.js는 상위 구성 요소로 사용되며 다음과 같이 콜백 기능을 시작합니다.
코드 조각(App.js):
import React from 'react';
import Child from './Child'
class App extends React.Component{
state = {
name: "",
}
handleCallback = (childData) =>{
this.setState({name: childData})
}
render(){
const {name} = this.state;
return(
<div>
<Child parentCallback = {this.handleCallback}/>
{name}
</div>
)
}
}
export default App
먼저 name 상태를 생성한 다음 Child.js 구성 요소에서 name 변수에 해당하는 데이터를 가져올 콜백 함수를 선언합니다.
자식 구성 요소에서 데이터를 다시 가져오면 Child.js의 name 변수에 할당된 데이터를 반환하는 함수를 만듭니다.
다음으로 Child.js로 이동하고 여기에서 수행하려는 작업을 선언합니다.
코드 조각(Child.js):
import React from 'react'
class Child extends React.Component{
onTrigger = (event) => {
this.props.parentCallback(event.target.myname.value);
event.preventDefault();
}
render(){
return(
<div>
<form onSubmit = {this.onTrigger}>
<input type = "text"
name = "myname" placeholder = "Enter Name"/>
<br></br><br></br>
<input type = "submit" value = "Submit"/>
<br></br><br></br>
</form>
</div>
)
}
}
export default Child
출력:
이 데이터를 부모에게 다시 전달하기를 원하기 때문에 자식 구성 요소 내에서 콜백 기능을 시작하는 기능이 필요합니다. 여기에서 onTrigger 이벤트 리스너가 필요합니다.
Submit 버튼을 클릭하고 결과가 표시되면 onTrigger는 name 변수에 할당된 값을 상위 구성 요소로 다시 전달하여 callback 기능을 즉시 활성화합니다.
Props를 사용하여 상태를 상위 구성 요소로 다시 전달
이것은 이전 예제에 비해 더 간단한 방법입니다. props를 사용하여 처리된 결과를 상위 구성 요소로 반환합니다.
src 폴더로 이동하여 User.js라는 새 파일을 만듭니다. 이것은 우리의 자식 컴포넌트가 될 것입니다.
App.js는 상위 구성 요소이며 다음 코드를 전달합니다.
코드 조각(App.js):
import React from 'react'
import './App.css';
import User from './User'
function App() {
function getName(name) {
alert(name)
}
return (
<div className="App">
<h1>Returning State Back to Parent</h1>
<User getData={getName} />
</div>
);
}
export default App;
name 함수에 할당된 날짜를 가져오도록 React 프레임워크에 지시하는 name 함수를 만듭니다. 그런 다음 경고, 즉 팝업 형태로 반환하려고 합니다.
그런 다음 하위 구성 요소인 User.js에 코드를 조금 더 넣습니다.
코드 조각(User.js):
function User(props)
{
const name="Oluwafisayo"
return(
<div>
<h1>My Name is : </h1>
<button onClick={()=>props.getData(name)} >Click Me</button>
</div>
)
}
export default User;
출력:
여기에서 name 함수에 데이터를 할당하고 Click me 버튼을 누르면 onClick 이벤트 리스너가 활성화되어 부모에게 props로 데이터를 반환합니다. props는 속성의 약자입니다.
둘 이상의 하위 구성 요소에서 상위 구성 요소로 데이터 전달
두 개의 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하기 때문에 상위 구성 요소에 대해 TodoList.js 파일을 만들고 하위 구성 요소에 대해 Todo.js 및 DeadlineList.js 파일을 만듭니다.
상위 구성 요소에는 하위 구성 요소에서 검색하려는 데이터를 파생시키는 기능을 정의하는 코드가 있습니다.
코드 조각(TodoList.js):
import React from "react";
import Todo from "./Todo";
import DeadlineList from "./DeadlineList";
const TodoList = ({ todos, toggleTodo }) =>
console.log(todos) || (
<table>
<tbody>
<tr>
<th className="taskTH">TASK</th>
<th className="deadlineTH">DEADLINE</th>
</tr>
<tr>
<td className="taskTD">
{todos.map((todo) => (
<Todo
key={todo.id}
text={todo.text}
completed={todo.completed}
toggleTodoItem={() => toggleTodo(todo.id)}
/>
))}
</td>
<td className="deadlineTd">
{" "}
{todos.map(
(todo) =>
console.log("TODO", todo) || (
<DeadlineList
key={todo.id}
value={todo.date}
completed={todo.completed}
onClick={() => toggleTodo(todo.id)}
/>
)
)}
</td>
</tr>
</tbody>
</table>
);
export default TodoList;
다음으로 양식인 Todo.js를 작업합니다. 데이터가 입력되고 Add Todo 버튼을 클릭하면 데이터가 반환됩니다.
코드 스니펫(Todo.js):
import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'
const Todo = (props) => {
const { toggleTodoItem, completed, text } = props;
let [ shouldPlaySound, setShouldPlaySound ] = useState(true);
function wooHooEverySecondClick() {
if (shouldPlaySound) {
wooHooSound.play();
setShouldPlaySound(false);
} else {
setShouldPlaySound(true);
}
}
return (
<li className="bananaLi"
onClick={() => {
toggleTodoItem();
wooHooEverySecondClick();
}}
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
>
{text}
</li>
);
};
export default Todo;
그런 다음 DeadlineList.js는 목록 형식의 형태로 부모에게 목록을 렌더링하는 역할을 합니다.
코드 조각(DeadlineList.js):
import React from "react";
const DeadlineList = ({ onClick, completed, value }) => {
return (
<li
className="deadlineLi"
onClick={onClick}
style={{
textDecoration: completed ? "line-through" : "none"
}}
>
{new Intl.DateTimeFormat("en-US").format(value)}
</li>
);
};
export default DeadlineList;
그런 다음 App.js 내부의 모든 것을 가져옵니다.
코드 조각(App.js):
import React from 'react';
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList';
import Footer from './Footer';
const App = () => (
<div className="appCSS">
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
export default App;
출력:
결론
개발자가 팀으로 프로젝트를 빌드할 때 구성 요소별로 일관된 단축 코드를 작성하면 팀원의 도움을 쉽게 받을 수 있습니다. 반대로 코드가 막힌 프로젝트는 지원하려는 동료 개발자를 쉽게 미루게 됩니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn