[ToyProject-Todomate] 투두메이트 클론 프로젝트 27

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

 

어제 목표 출력 화면은 정리가 되었고 이제 작성된 목표를 클릭하면 Input에 값이 전달되고 그 값을 수정하면 해당 목표가 수정될 수 있도록 해야한다.

 

어떻게 하면 Input 태그에 값을 전달할 수 있을까 고민하다보니 이전에 PHP로 회원가입을 만들었던 화면이 떠올랐다.

회원가입 후 회원정보수정에 들어가면 회원 아이디를 이용해 데이터베이스에서 정보를 찾아 value에 뿌려줬었다.

 

이것도 그것과 같지 않을까..

 

 

Input 태그에 title 값 뿌리기

 

 

우선 클릭하면 editId를 인자로 받는 Input에 뿌리는 함수를 하나 만들어보자.

 

이벤트 핸들러 함수에 editToGoalForm 이라는 이름의 함수를 연결한다.

해당 함수는 state를 이용해야 하니까 App.js 에 있으면 되겠다.

 

 

//목표 GoalForm으로 보내기 함수
function editToGoalForm(id){
	const thisItems = goal.items; // goal State 원본 카피

}

 

 

인자로 들어온 id를 이용해 해당 state를 찾아야 한다.

현재 state의 원본을 카피하기 위해 thisItems 변수에 할당해준다. 는 배열이기 때문에 배열을 순회하면서 id값이 주어진 인자와 같은 것이 있는지 찾아보자.

 

thisItems를 콘솔로 찍어보면 아래와 같다.

 

 

배열을 순회하기 위해 여러 반복문을 쓸 수 있지만 조건을 쓸 것이기 때문에 deleteGoal 처럼 filter 함수를 써봐야겠다.

 

 

 

   //목표 GoalForm으로 보내기 함수
   function editToGoalForm(id){
    const thisItems = goal.items; // goal State 원본 카피
    const editItems = thisItems.filter(e => e.id === id)
    console.log(editItems)
  }

 

 

이렇게 해서 찍어보면 아래와 같이 나온다.

 

 

 

그럼 이제 이 새롭게 만든 editItems라는 배열을 Input에 전달해줘야 한다.

아직도 전달을 못했다.

 

만든 editItems를 GoalForm에 전달해주고 싶은데...

Goals에다 또 전달하고 GoalForm으로 또 가야할까?

그냥 App.js에 있는 Goals 컴포넌트 위에 넣어도 동일하게 작동할 것 같은데.. 함수를 보내기도 더 편하고.

 

<Route exact path="/goals">
        <BasicNavBar/>
          <GoalForm addGoal={addGoal} editTmpGoal={editTmpGoal}  />
          <Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal}
          editToGoalForm={editToGoalForm}  />
        </Route>

 

Goals 컴포넌트에서 GoalsForm 컴포넌트를 빼고 App.js 에 라우터 내의 배치를 이렇게 바꾸었다.

 

 

 

사실 자바스크립트로 만들라고 하면 금방 만들겠는데 리액트로 하니까 컴포넌트의 순서도 맞춰야하고, props도 내려야 하고 ... 고민이 이만저만이 아니다.

결국에는 왜 리액트를 쓰게 되는지 알게 된다는데..

 

지금 해야할 일은 목표 클릭하면! textfield에 값이 들어가게 하는 것이다. 

당연히 DOM으로 처리해야 하기 때문에  textfield를 쿼리셀렉터같은걸로 선택해야하나? 했더니

또 훅이 있다.

 

훅..

 

그리고 수정 상태가 되었을 때, textfield에 value가 생성되어야 하는데

그것보다는 컴포넌트가 두 개 이고, 저번에 한 것 처럼 readOnly 가 false일 때, 수정사항을 반영할 수 있는 컴포넌트가 기존 GoalForm 컴포넌트 위에 덮이는게 낫지 않을까?

 

 

우선 useRef 먼저 써봐야겠다.

 

 

useRef 사용하기

 

 

useRef 를 사용하기 위해서는 객체를 만들어줘야 한다.

 

 

 

const goalField = useRef;

 

 

 

그리고 변경을 위하는 태그에 속성으로 ref 값을 넣어준다.

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

 

어제 목표 출력 화면은 정리가 되었고 이제 작성된 목표를 클릭하면 Input에 값이 전달되고 그 값을 수정하면 해당 목표가 수정될 수 있도록 해야한다.

 

어떻게 하면 Input 태그에 값을 전달할 수 있을까 고민하다보니 이전에 PHP로 회원가입을 만들었던 화면이 떠올랐다.

회원가입 후 회원정보수정에 들어가면 회원 아이디를 이용해 데이터베이스에서 정보를 찾아 value에 뿌려줬었다.

 

이것도 그것과 같지 않을까..

 

 

Input 태그에 title 값 뿌리기

 

 

우선 클릭하면 editId를 인자로 받는 Input에 뿌리는 함수를 하나 만들어보자.

 

이벤트 핸들러 함수에 editToGoalForm 이라는 이름의 함수를 연결한다.

해당 함수는 state를 이용해야 하니까 App.js 에 있으면 되겠다.

 

 

//목표 GoalForm으로 보내기 함수
function editToGoalForm(id){
	const thisItems = goal.items; // goal State 원본 카피

}

 

 

인자로 들어온 id를 이용해 해당 state를 찾아야 한다.

현재 state의 원본을 카피하기 위해 thisItems 변수에 할당해준다. 는 배열이기 때문에 배열을 순회하면서 id값이 주어진 인자와 같은 것이 있는지 찾아보자.

 

thisItems를 콘솔로 찍어보면 아래와 같다.

 

 

배열을 순회하기 위해 여러 반복문을 쓸 수 있지만 조건을 쓸 것이기 때문에 deleteGoal 처럼 filter 함수를 써봐야겠다.

 

 

 

   //목표 GoalForm으로 보내기 함수
   function editToGoalForm(id){
    const thisItems = goal.items; // goal State 원본 카피
    const editItems = thisItems.filter(e => e.id === id)
    console.log(editItems)
  }

 

 

이렇게 해서 찍어보면 아래와 같이 나온다.

 

 

 

그럼 이제 이 새롭게 만든 editItems라는 배열을 Input에 전달해줘야 한다.

아직도 전달을 못했다.

 

만든 editItems를 GoalForm에 전달해주고 싶은데...

Goals에다 또 전달하고 GoalForm으로 또 가야할까?

그냥 App.js에 있는 Goals 컴포넌트 위에 넣어도 동일하게 작동할 것 같은데.. 함수를 보내기도 더 편하고.

 

<Route exact path="/goals">
        <BasicNavBar/>
          <GoalForm addGoal={addGoal} editTmpGoal={editTmpGoal}  />
          <Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal}
          editToGoalForm={editToGoalForm}  />
        </Route>

 

Goals 컴포넌트에서 GoalsForm 컴포넌트를 빼고 App.js 에 라우터 내의 배치를 이렇게 바꾸었다.

 

 

 

사실 자바스크립트로 만들라고 하면 금방 만들겠는데 리액트로 하니까 컴포넌트의 순서도 맞춰야하고, props도 내려야 하고 ... 고민이 이만저만이 아니다.

결국에는 왜 리액트를 쓰게 되는지 알게 된다는데..

 

지금 해야할 일은 목표 클릭하면! textfield에 값이 들어가게 하는 것이다. 

당연히 DOM으로 처리해야 하기 때문에  textfield를 쿼리셀렉터같은걸로 선택해야하나? 했더니

또 훅이 있다.

 

훅..

 

그리고 수정 상태가 되었을 때, textfield에 value가 생성되어야 하는데

그것보다는 컴포넌트가 두 개 이고, 저번에 한 것 처럼 readOnly 가 false일 때, 수정사항을 반영할 수 있는 컴포넌트가 기존 GoalForm 컴포넌트 위에 덮이는게 낫지 않을까?

 

 

우선 useRef 먼저 써봐야겠다.

 

 

useRef 사용하기

 

 

useRef 를 사용하기 위해서는 객체를 만들어줘야 한다.

App.js 에 만들어보자.

 

 

const goalform_textfield = useRef;

 

 

그리고 변경을 위하는 태그에 속성으로 ref 값을 넣어줘야 한다. 그러기 위해서는 컴포넌트에 props로 ref로 만든 객체를 내려줘야한다. 나는 TextField의 값(value)가 변경되야 하는데, 클릭 이벤트는 Goals에 있기 때문에 GoalForm과 Goals 모두 ref props를 내려준다. ref 라는 속성은 나중에 쓸거기 때문에 TextField_Ref이라고 내려준다.

 

 

  <GoalForm addGoal={addGoal} editTmpGoal={editTmpGoal} TextField_Ref={TextField_Ref} />
  <Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} 
  editToGoalForm={editToGoalForm} TextField_Ref={TextField_Ref}   />

 

 

그리고 GoalForm 컴포넌트의 TextField에 props로 받아온 ref를 넣어주자.

 

 

<TextField fullWidth id="goalform_textfield" variant="standard"
onChange={onInputChange} ref={ TextField_Ref } />

 

 

그리고 정상적으로 작동하는지 보기 위해서 editToGoalForm 함수에 goalField.current.focus()를 사용해보았다.

.focus는 그 부분에 포커스를 주는 메소드다.

 

흠.. 아무런 반응이 없었다. Ref 훅을 사용하는 방법이 틀린게 아닐까?

 

 

Ref를 줘야하는 곳은 GoalForm이고, 실제 이벤트가 시작되는 곳은 Goals 이다.

원래 Goals 안에 GoalForm이 있었으나 두개를 나란히 병렬배치했는데..

 

 

그림으로 표현하자면 이렇다.

 

 

 

 

 

이렇게 하면 Goals와 GoalForm이 Ref를 공유할 수 있을 거라고 생각했는데.. ref로 지정한 태그가 GoalForm에 있기 때문에 Goals에서 쓰지 못하는게 아닐까? 생각이 들었다.

 

그래서 플랜 B로 만들어 볼 예정..

 

 

이것만 해결하면 다음 진도가 좀 잘 나갈거같은데 거의 일주일 동안 클릭->TextField에 값 올리기 를 헤메고 있다 ㅠㅠ