Props and State

Prop

Definition

• Input for components - The mechanism for passing data from parent components to child components

Features

• Value changes are not possible in the component

• Receives values from the parent component

  • Example code

     // When using multiple props" data-simply-add-the-props-to-make-it-work--func3-firstname=""Minseo" lastName">
    
    

• You can access props through the prop object passed as a parameter to the function component.

  • Example code

  react // Cannot be reused function Func1() { return

  First Output

  } // Passing data to the component via props function Func2(data) { return

  Hello, {data.name}

  }

  // Example of using multiple props // Passing data to the component via props function Func3(data) { return

  Hello, {data.firstName} {data.lastName}

  } ~~~ Now when the component renders
  The Func1 component displays 'First Output',
  The Func2 component displays 'Hello, Minseo',
  The Func3 component displays 'Hello, Minseo Kim'.

State

Definition

• Values that can be updated within a component

How to Use

Declaration

• Created using the useState hook function - The useState function takes an initial value as an argument and returns an array containing the name as the first element and a function for updating the state value as the second element.

- The setState function executes updates to the component's state object, and if the state changes, the component is re-rendered. - Note: The setState function is called asynchronously. - Example code

react // Creates a state variable named 'age' with an initial value of 30 const [age, setAge] = React.useState(30);

- When importing the useState function in React, you can omit React and use the useState function directly.

~~~react //useState 함수 가져오기 import React, {useState} from 'react'

//State variable works even without React const [age, setAge] = useState(30);

- Declaration is also possible using objects - Example

~~~react const [name, SetName] = useState({ firstName = 'Minseo', lastName = 'Kim' }); ~~~



<br>

##### Call

- Calling is simple using **{the name of the state object}** - Example code

~~~react function GetNameComp(){ const [age, SetAge] = React.useState(30); return <div> Age : {age} </div>; } ~~~



##### Value Update

- State values can be modified using the state update function declared when setting the state - Used in the form: **updateFunction(valueToUpdate);** - **Note:** If you directly update state using `=`, React will not re-render the UI, making it impossible to reassign the const function - Example code

~~~react setAge(25); ~~~

- When there are multiple states, the useState function can be called multiple times - Example

react // Declaration of multiple states const [firstName, SetFirstName] = "Minseo"; const [lastName, SetlastName] = "Kim";


// Multi-state call SetFirstName('Hojun'); SetLastName('Shin'); ~~~

- When declaring state using an object, it can be called as follows:

~~~react setName({firstName: 'Hojun', lastName: 'Shin'}); ~~~

- Partial updates are also possible - For partial updates, use **spread** - Spread utilizes the object spread syntax (**...**) introduced in ES2018 - Example code

react // Copies the state object named 'name' and updates firstName to 'Hojun' SetName({... name, firstName : 'Hojun'});

Common Points and Differences with Props

Common Points

- Both props and state serve as input data for rendering components; when state changes, the component re-renders.

Differences

- State values can be updated within a component, unlike props - Props are passed to a component, but state is managed internally within the component

<br><br><br>

---

**References**

[Component State](https://ko.legacy.reactjs.org/docs/faq-state.html) 

[Hands-On! Modern Web Application Development with Spring Boot and React](https://www.yes24.com/Product/Goods/119973506).