[React] Fragment, props, redux

🤔 Fragment

• 공식문서) Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.
• 공식문서의 예시가 굉장히 잘 설명되어 있기 때문에, 이것을 빌려와서 이해해보겠음 !

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns /> // `<td>` 엘리먼트만 반환해야 함.
        </tr>
      </table>
    );
  }
}

위 코드의 경우, 렌더링 된 html이 유효하려면 저 <Columns />가 <td>엘리먼트만 반환해야 함. 그러나 Columns 컴포넌트를 보면 <div>로 <td>들을 감싸고 있음.

class Columns extends React.Component {
  render() {
    return (
      <div> // 그러나 <div>도 포함되어 있음.
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

그렇기 때문에 결국 Table 컴포넌트는 아래와 같음.

<table>
  <tr>
    <div> // 의미없는 div 태그가 추가됨.
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Fragments를 사용하면 해결 가능 !

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment> // <div>대신 fragment로 감싸줌.
        <td>Hello</td>
        <td>World</td>
      </React.Fragment> // <>와 </>로 대체 가능
    );
  }
}

짠 이제 Table 컴포넌트가 제대로 반환될 수 있음.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

• 만약, Fragments에 key가 있다면 <>가 아닌 <React.Fragment> 문법으로 명시적으로 선언해주어야 함.
  (key는 Fragment에 전달할 수 있는 유일한 어트리뷰트)

👉 장점)

• Fragment는 불필요한 DOM 노드의 생성을 막기때문에 메모리를 적게 사용.
• css 메커니즘에서 특별한 부모 자식관계를 가지고 있는 flexbox나 gridbox관계에 있는 엘리먼트 사이에 <div>를 추가하게 되면 레이아웃을 유지하기 어려워지므로 fragment를 사용하면 된다.
  
  

💟 Fragment 사용 이유)

• 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환.
  리액트를 사용하기 위한 문법인 JSX 를 쓸 때,
  return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다.
  이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.

📌 사용사례 )

단축 문법을 이용하여 두개의 <h1> 엘리먼트 그룹화

export default class FragmentComponent extends React.Component {
  render() {
    return (
      <>
        <h1> 안녕 </h1>
        <h1> 하세요 </h1>
      </>
    );
  }
}

🤔 props

• props는 properties의 약자로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용.
• 일반적으로 React에서 모든 데이터 전달 방향은 부모 컴포넌트 → 자식 컴포넌트로 향함.
  그래서 자식 컴포넌트에서 필요한 데이터는 부모 컴포넌트에서 자식 컴포넌트의 props에 담아 전달하게 됨. (객체 형태)
• 자식은 받아온 props를 직접 수정할 수 없고, 읽기만 가능함.
  why? ) 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며, 모든 React 컴포넌트는 자신의 props를 다룰 때, 순수 함수처럼 동작해야 한다.

순수 함수) 함수가 자신의 입력값을 바꾸려 하지 않고, 
          항상 동일한 입력값에 대해 동일한 결과를 반환

👉 만약,  App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주려면

function App() {
  return (
    <Hello name="react" /> // props에 담아 전달
  );
}
<br/>


👉 Hello 컴포넌트에서 받아서 사용하려면

function Hello(props) { // props를 받아오는 거지 !
  return <div>안녕하세요 {props.name}</div>
}


❓ 만약 App 컴포넌트에서 name과 함께 color 값도 전달해줬다면 ?

function Hello({ color, name }) { // 비구조화 할당 이용
  return <div style={{color}}>안녕하세요 {name}</div> 
} // props. 을 사용하지 않고 간결하게 표현 가능.

• defaultProps 를 사용하면 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정할 수 있음.

Hello.defaultProps {
name : 'No name'
}

// 그러면 App 컴포넌트에서 name props를 넘겨주지 않았을 때 화면에는 No name 이라고 보여짐.

📌 사용사례 )

이름과 나이를 출력해주는데, 이름을 넘겨주지 않은 경우엔 default 값을 이용하고 싶다면

// App 컴포넌트
class App extends Component {
  render() {
    return (
      <div className="App">
        <MyComponent name="ivy" age="24" />
        <MyComponent age="27" />
      </div>
    );
  }
}


// MyComponent 컴포넌트
class MyComponent extends Component
{
    render(){
        return(
            <h1>name: {this.props.name} </h1>
            <h1>age: {this.props.age} </h1>
        )
    }
}

MyComponent.defaultProps = {
    name : "이름이 없습니다."
}

// 출력
name: ivy
age: 24

name: 이름이 없습니다.
age: 27

🤔 redux

• 공식문서)
  Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
  Redux는 액션이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트 하기 위한 패턴 및 라이브러리

• redux 를 사용하면 상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 됨 !

아래 참고 사이트에도 적었지만, redux를 이해하는데 가장 큰 도움이 된 글의 링크 !
https://velopert.com/3528

👉 reducer

• store에 들어갈 state와 state 변경 함수를 정의하는 곳 (직접 구현해야 함)
• 기본적으로 순수함수 (입력값을 수정하지 않는 함수) 로 코딩하고, 불변성을 지켜야 함.
  (redux가 이전 state와 변경된 state를 구분하는 방법은 참조값이 바뀌었는지 확인하고, 바뀌었다면 state가 바뀌었다고 인식하고 해당 state를 사용하는 컴포넌트에게 리렌더링을 요청함. 그렇기 때문에 직접적으로 state를 변경하면 참조값이 변하지 않으므로 redux는 값이 바뀌었다고 인식하지 않고, 그렇기 때문에 리렌더링 되지 않음. 그래서 불변성을 지켜야 함!)

어떤 컴포넌트에서 이벤트가 발생하여, 상태를 변화 할 일이 생겼다면 dispatch(action) 처럼 
dispatch라는 함수를 통해 action을 store에게 던져줌.

이 때 액션은 상태에 변화를 일으킬 때 참조할 수 있는 객체 ! 
필수적으로 type이라는 값을 가지고 있어야 함.

액션 객체를 전달받게 되면, 전달받은 액션의 type에 따라 
어떻게 상태를 업데이트 할 지 정의하는 함수를 '리듀서'라고 부름.

예를 들어 { type: 'INCREMENT' }라면 숫자를 더해주는 작업을 하면 되는거임.

리듀서 함수는 `state(현재 상태)`와 `action(액션 객체)` 두가지를 파라미터로 받아 
새로운 state를 반환해 줌.

상태에 변화가 생기면, store를 구독하고 있던 컴포넌트에게 listener()를 통해 알려줌.
이제 구독자 컴포넌트는 새로운 상태를 받게 되고, 그에 따라 리렌더링을 하게 됨.

👉 react-redux hook

redux에 있는 함수는 다음과 같음.
1. getState(): 현재 state를 받음.
2. dispatch(): action을 reducer한테 보내서 state를 update시킴.
3. subscribe(): state가 변경되면 callback함수 호출.

즉, 실행 흐름을 보면
subscribe()를 지정 -> dispatch()를 통해 state 변화 -> subscribe에서 
getState()를 통해 state를 가져오고, 그 값으로 컴포넌트를 리렌더링 함.

여기서 subscribe를 작성하고 다시 re-render하는 작업은 복잡하고 힘든 일인데, 
이 문제를 react-redux hook을 통해 해결할 수 있음 !

• useSelector
  : redux의 state관리를 도와줌. react 컴포넌트 redux의 store 내부의 data를 읽을 수 있다. (state가 변경되면 이를 반영하기 위해 subscribe를 사용해야 했지만, useSelector를 이용하면 자동적으로 subscribe하는 효과가 있음)

• useDispatch
  : store.dispatch를 대신하여 간단히 사용할 수 있으며, useDispatch의 return값은 store.dispatch()이다.

• Provider
  : react-redux hook이 원하는 redux store에 접근할 수 있게 해줌.
  hook은 js함수이므로 저절로 store.js에서 store를 가져올 수 없다.
  이를 해결하기 위해 react-redux한테 store를 전달해야 하는데 이 때 provider 사용.

💟 redux 사용 이유 )

- state 종속성 탈피

: useState를 사용할 경우, 컴포넌트 내부에 state를 만들고 함수로 state를 변경하므로 state가 컴포넌트에 종속되는 것은 당연한 결과임.
그러나, redux는 프로젝트의 루트레벨에서 store라는 곳에 state를 저장하고, 모든 컴포넌트는 store에 구독을 하면서 state와 state 변경 함수를 전달 받게 됨. 따라서 컴포넌트에 종속되지 않고, 상태관리를 컴포넌트 바깥에서 함.

- props 지옥 탈출

: 우리가 원하는 state가 자식의 자식의 자식 .. 에서 사용한다면 props를 내리고 ~ 그 state 변경 함수를 또 내리고 ~ 계속 내림.
redux의 store는 프로젝트의 루트레벨에 위치하고, 해당 store를 구독하는 컴포넌트 모두는 state와 state 변경 함수를 받을 수 있기 때문에, 어느 위치에 있든 상관 없이 단 한번에 상태를 받을 수 있음.

💟 redux를 사용하기 좋은 경우 )

• 애플리케이션의 여러 곳에서 필요한 state의 양이 많은 경우
• 계속해서 바뀌는 상당한 양의 데이터가 있는 경우
• state가 시간이 지남에 따라 자주 업데이트 될 경우
• 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 더 이상 적절하지 않은 경우
• 프로젝트의 규모가 큰 경우

📌 사용사례 )

type에 따라 숫자를 더하고, 빼고, 초기화 하는 등의 작업 수행

// reducer 함수
const initialState = {
	value: 0
}

export default function addsubReducer(state = initialState, action) {
	switch (action.type) {
		case 'increment': {
			return {
				...state,
				value: state.value + 1
			}
		}
		case 'decrement': {
			return {
				...state,
				value: state.value - 1
			}
		}
		case 'reset': {
			return {
				...state,
				value: 0
			}
		}
		default:
			return state
	}
}


// store 생성
import { createStore } from 'redux'
import rootReducer from './reducer'

const store = createStore(rootReducer) // redux의 createStore를 이용하여 생성

export default store


// index.js
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
	<React.StrictMode>
		<Provider store={store}> // Provider를 통해 우리가 작성한 store 지정
			<App />
		</Provider>
	</React.StrictMode>,
	document.getElementById('root')
);


// App.js
function App() {
	const dispatch = useDispatch() 
        // store.dispatch를 대신하여 간단히 사용할 수 있는 react-redux hook

	const { value } = useSelector(state => state.value)
	const { count } = useSelector(state => state.count)
        // redux의 state관리를 도와줌. 
        // react component에서 redux의 store 내부의 data를 읽을 수 있다.
        (subscribe()의 사용 없이 자동적으로 subscribe하는 효과가 있음)

	const addValue = () => {
		dispatch({ type: 'increment' })
	}
	const subValue = () => {
		dispatch({ type: 'decrement' })
	}
	const resetValue = () => {
		dispatch({ type: 'reset' })
	}
	const pushButton = () => {
		dispatch({ type: 'push' })
	}

	return (
		<div className="App">
			<div>
				value: {value}
			</div>
			<button onClick={addValue}> + </button>
			<button onClick={subValue}> - </button>
			<button onClick={resetValue}> reset </button>
			<div>
				count: {count}
			</div>
			<button onClick={pushButton}> click </button>
		</div>
	);
}

참고 사이트

Fragments
React Fragments 사용이유 및 사용법
[React] Fragment란?

---

Components와 Props
[React] 리액트 - props 사용하기
props를 통해 컴포넌트에게 값 전달하기
React Props, State 이해 및 사용법

---

Redux 시작하기
Redux 핵심, Part 1: Redux Overview and Concepts
리덕스
리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i)
react-redux 사용법
[React] redux 를 이용한 예제