React 컴포넌트 분리 State 배열 값 추가 및 삭제 방법

React 컴포넌트 분리 시작에 앞서

React를 공부하면서 가장 어렵게 느꼈던(지금도 어렵지만...) 내용은 컴포넌트를 분리하는 것이다.

결론부터 이야기를 하면 전체 그림에서 최소 단위까지 컴포넌트를 분리하면서 State의 관리를 어떻게 할 것인가

생각을 하면된다. 더욱 좋은 것은 Reducs를 사용해서 다른 쪽으로 머리 아픔을 돌린다.

 

평소 프론트 엔드에 관심이 없으나 최근 브라우저 렌더링과 같은 내용을 공부하다 보니 생각보다 재미있게 느껴지게 되었고 백엔드 공부가 어느 정도 되면 이후에 프런트도 깊이 있게 공부하고자 한다.

 

시작에 앞서 React는 Facebook에서 만든 라이브러리로 자바스크립트의 가상Dom 기술을 적극 활용하여 만든 기술이다.

 

React 컴포넌트 분리

리엑트를 처음 공부하였을 때 그동안 생각했던 내용과 가장 크게 다른 부분은 컴포넌트를 분리해서 State를 사용며 훅을 이용한다는 것이 아닌가 생각된다.
html의 경우 큰 고민이 없이 그냥 만들고 데이터를 뿌려주는 형식으로 하였지만 react는 각 컴포넌트마다 State를 관리하는 것이 잘 와닿지 않았다. 이때 같이 공부를 하면서 도와준 친구에게 너무 감사하다.

 

무엇을 만들지 생각하기

 

 

나는 생각을 많이 하는 편이지만 의미있는 생각을 하는 경우는 거의 없는 것 같다.

무엇인가 시작을 하기전 생각에 생각을 더하고 꼬리물기가 시작되었고 결국 원하는 답을 찾지 못한 채 시간을 보낸 적이 많았다. 이러한 나에게 친구는 한 가지 팁을 주었는데 그 팁은 이러했다. 무엇을 만들지 처음에 고민을 하고 접근이 가능한 최소 단위까지 분리를 한다. 그 생각이 끝나면 실행으로 옮겨서 검증을 해야 한다. 처음에 무슨 말인가 너무 어려웠지만 그 친구는 나보다 개발을 잘하였기 때문에 일단 실행하였다. 처음에는 생각이 이리저리 왔다 갔다 하였지만 만들고자 하는 것을 깊게 생각하다 보니 집중이 되기 시작하였다.

 

다음과 같이 할 일 플래너를 만들고자 하였고 어떻게 컴포넌트를 분리하면 좋을까 생각을 하였다. 접근이 가능한 최소 단위까지 이러한 생각을 하기 전에는 한줄 한 줄 작성하는 것이 너무 어려웠다.

그런데 접근이 가능한 최소 단위까지 작성을 하고 보니 조금씩 코드가 작성이 되었다. 여기서 원하는 대로 동작이 되는 가는 중요하게 생각하지 않았다.
시작을 할 수 있고 내가 생각한 것을 만드는 것이 중요했다.

최소 작은 단위까지 컴포넌트를 분리해 보았고 개발을 시작하였다.

원하는 대로 동작이 안되어도 상관이 없다고 생각을 하였으며 경험을 하고 이러한 좋은 방법을 습관으로 만들고자 하였다.

아래와 같이 컴포넌트를 분리하였고 가작 작은 단위부터 개발을 시작하였다. 

간단한 동작이 되는 것을 우선 만들면서 Props를 어떻게 관리해야 하는지 고민을 하게되었다.

이렇게 개발이 완성된 이후 다음으로 개발해야 하는 것이 무엇인지 무엇을 만들어야 접근이 수월할까 고민을 하였다.

위와 같이 props를 이용하여 부모 컴포넌트에서 자식컴포넌트로 값을 전달하고 화면에 리스트를 뿌려준다.

이후 삭제 버튼을 누르면 해당 값을 제거한다. 체크박스를 클릭하면 text에 취소선을 생성한다.

이때 text의 취소선을 만드는 State를 어떻게 해야 할까?

삭제 버튼을 클릭해서 제거를 하는 경우 부모 컴포넌트랑 값이 달라지는 문제를 어떻게 해결할까 생각하였다.

그렇게 해서 훅을 이용하여 함수를 내리고 개별적으로 컴포넌트에서 체크를 위한 state를 생각하여 개발하였다.

이후 하나씩 해결된 문제를 조립하고 보니 별거 아닌 문제였다. 여기서 문제를 최소 작은 단위까지 나누어 접근이 가능한 수준까지 나누어야 한다는 것을 이해하였다.

 

구현 코드

할 일 컴포넌트

아래는 할 일 목록의 상태를 보여주며 CheckBox의 체크가 활성화되면 line-through 처리를 해주는 컴포넌트이다.

 function Job({job}){
            const [isOn, setIsOn] = useState(false);
            const style ={
                fontSize : '20px',
                textDecoration: isOn? "line-through" : "none" 
            }
            return (
                <>
                    <input type="checkbox" onChange={()=>{setIsOn(!isOn)}}/>
                    <span style = {style}>{job}</span>
                </>
            )
        }

 

할 일 목록의 레이아웃 컴포넌트

아래는 React에서 배열을 뿌려주는 코드이다.
영어를 잘 못해서 클린코드처럼 작성하지 못한 나의 무지함을 느낀다.

해당 컴포넌트를 분리한 이유로 CSS를 별로 좋아하지 않아서 CSS를 덜하고 싶은 생각이 있었으며 이후 다른 기능 추가를 고려하였기 때문이다.

 function Flan({work,remove}){
            
            return (
                <>
                    {
                        work.map( job => (
                            <div>
                                <Job job={job}/>
                                <button onClick={()=>{
                                    remove(job)
                                }}>삭제</button> 
                            </div>
                        ))
                    }
                </>
            );
        }

 

메인 레이아웃 컴포넌트

메인이 되는 컴포넌트로 모든 State는 해당 컴포넌트를 기준으로 props를 내려주게 된다.

아쉬운 점으로 그냥 배열이 아닌 객체 배열 형식으로 관리를 해서 같은 이름이 삭제되는 것을 방지해야 했는데

집에 가고 싶은 마음에 더 이상 수정을 하지 않았다.

아래의 코드에서 remove 함수는 배열의 값을 지울 수 있으며 배열의 요소를 하나씩 꺼내어 같지 않은 것을 리턴하고 같은 값은 리턴하지 않아 배열에서 제외시키는 로직을 담당한다.

function Board(){
            
            const [work, setWork] = useState([])

            const style ={
                width : '300px',
                height : '400px',
                backgroundColor : '#AADBFF'
            }

            const board ={
                height: '83%',
                width:'100%'
            }

            const inputStyle = {
                width : '70%'
            }

            const remove = job => {
                setWork(work.filter(w => w !== job));
                console.log(work);
            }

            return(
                <div style={style}>
                    <h3 style={{ textAlign :"center"}}>Gorilla 할 일 플래너</h3>
                    <div style={board}>
                        <Flan work={work} remove = {remove}/>
                    </div>
                    <input id="work" type="text" style={inputStyle}/>

                    <button onClick={() =>{
                        let job = document.getElementById('work');
                        setWork([...work, job.value]);
                        job.value ='';
                    }}>입력 하기</button>
                </div>
            );
        }

위의 코드를 기반으로 할 일 목록 플래너를 만들게 되었으며 너무 과거의 이야기지만 react를 다시 공부하면서 그때의 마음을 생각하며 깊이 있는 학습의 시작을 하고자 한다. 개발을 어느 정도 하는 시점이 되면 컴퓨터가 이해하는 코드를 작성하는 것은 쉽지만 사람이 이해하는 코드를 작성하는 것은 쉽지 않다는 말이 있다.

사실 둘 다 어렵지만 나도 이해가 안 되는 코드는 최대한 작성하지 않도록 영어 공부와 주석을 다는 것은 꼭 해야겠다.