안녕하세요 react js 관련 질문이 있습니다.
조회수 741회
안녕하세요 React js 를 공부하고있는 직장인입니다.
다름이 아니라 React를 이용해서 메모 웹어플리케이션을 제작중인데 모르는 점이 생겨서 질문드립니다.
현재 왼쪽 상단에 위치한 추가 버튼을 누르면 hello가 적혀져있는 item div에 배열이 생성됩니다. 배열은 기본적으로 빈 input과 고유 id를 가지고있습니다.
저는 input 작성을 title이 적혀있는 div에서 해주고싶습니다.
예를들면 item1의 input내용을 오른쪽에서 작성하고 싶습니다. Item2를 클릭하면 작성되어있는 input이 오른쪽에서 보이게 하고 싶구요
구글링을 해봤는데 방법을 잘 모르겠어서 질문드립니다 ㅠㅠ
해당 프로젝트 코드가 게시글에 첨부하기에는 양이 좀 많아서 깃헙 주소로 올립니다.
https://github.com/Jogeonsang/marcus-app
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
도움 주시면 정말 감사하겠습니다 !!
2 답변
-
올려 주신 레포 받아서 돌려보니 스크린샷과 너무 달라서 제대로 된 답변을 드리기가 어렵네요. 아무튼 요점만 말씀드리자면... 상태(
state)가 관리되어야 합니다."왼쪽"과 "오른쪽"은 분리된 것 같지만 공통의
props(데이터)를 사용하기 때문에 그 상위 객체가 데이터 상태를state로 관리해 줘야 합니다. 그래야 그state의 변화에 왼쪽이든 오른쪽이든 반응("react")을 하지요.따라서 대략 구상해 보면:
- 이 앱의 최상단 객체가 정의해야 하는
state: 각 아이템별 내용, 편집 완료 여부 - "오른쪽" 객체가 받아야 하는
props: "왼쪽"에서 선택하는 아이템의 번호, 해당 아이템의 편집 완료 여부 - "오른쪽" 객체가 해야 하는 일: 편집 완료 상태일 경우 정적뷰 형태로, 아닐 경우
<form>형태로 아이템 내용을 출력 - "오른쪽" 객체의 폼이 "서브밋"될 경우 오른쪽 객체가 해야 하는 일: 해당 아이템의 최신 내용과 편집 완료 여부를 최상단 객체
state에setState()로 갈음하기
- 이 앱의 최상단 객체가 정의해야 하는
-
일단 답변 정말 감사합니다! 제가 깃헙 주소를 잘못 올렸네요 ㅠㅠ 죄송합니다. 깃헙 주소 수정했으니 한번 참고해주시면 감사할 것 같습니다! 답변 다시한번 감사드립니다!!
댓글 입력