React 컴포넌트 나누기

- main.jsx

설명 ) "tryInfo"  이름으로 객체 v를, "index" 이름으로 인덱스i를 자식컴포넌트인 try 에 넘겨준다.

return(
        <>
            <h1>{ result }</h1>
            <form onSubmit = { onSubmitForm }>
                <input maxLength = { 4 } value = { value } onChange = { onChangeInput } />
            </form>
            <div>시도: { tries.length }</div>

            <ul>
                
                {tries.map( (v, i) => {
                    return (
                        <Try key={`${i + 1} 차 시도 :`} tryInfo = { v } index = { i } />
                    );
                })}
            </ul>
        </>
    );

 

- try.jsx

설명) "props" 라는 이름으로 부모컴포넌트에게 데이터를 받는다.

props.tryInfo, props.index 를 받을 수 있다.

import React, { memo } from 'react';

const Try = memo(( props ) => {
    // props 의 값은 자식이 변경하면 안된다. 부모가 바꾸어야함. *원칙임!
    // 실무에서는 바꿔야할경우가있는데, 이럴경우 props를 state에 넣어준 후 그 state를 변경한다.

    
    // 부모한테받은 props 를 state 로 넣기.
    const [ result, setResult ] = useState(tryInfo.result);

    const onClick = () => {
        setResult('1');
    }
    
    return (
        <li key = { `${props.index} 차 시도` }> 
                   <div>{ props.tryInfo.try }</div>
                   <div>{ props.tryInfo.result }</div>

                   {/* 부모한테 받은 rpops 값 바꾼거 출력 */}
                   <div onClick={onClick}>{ result }</div>

        </li>
    )
});

export default Try;