[TIL] 24/01/16 [최종] useState 한번에 쓰기, 잇슈 모음

오늘도 화이팅!

1.  useState 한번에 쓰기

https://velog.io/@postlist/REACT-useState

data가 많아서, 정신못차림

-> state를 하나의 객체로 작성하고 카테고리를 하위 컴포넌트로 분리해줬는데 그쪽에서 set을 다 해주도록..

setState도 넘겨버리고..

const Write = () => {
  const initialCategoryData = {
    startDate: "",
    endDate: "",
    isOffline: false,
    region: "",
    numberOfMembers: 0,
    position: [{ name: "" }],
    techs: [{ name: "" }], // TODO: tech에 여러개 받고 한번에 넣는 법..
  }
  const [title, setTitle] = useState<string>("")
  const [content, setContent] = useState<string>("")
  const [categoryData, setCategoryData] = useState(initialCategoryData)
  ...
  return (
  ...
  <Category categoryData={categoryData} setCategoryData={setCategoryData} />
  ...
  )
}

카테고리 내에서 이런식으로.. 사용해봤다. .ㅠ.ㅠ

nterface Props {
  categoryData: TCategoryData
  setCategoryData: React.Dispatch<React.SetStateAction<TCategoryData>>
}

const Category = ({ categoryData, setCategoryData }: Props) => {
const { startDate, endDate, isOffline, region, numberOfMembers } = categoryData


return (

  <div onClick={() => setCategoryData({ ...categoryData, isOffline: false })}> 
  온라인
  </div>
  {/* 기타 생략 */}
  <input
  type="date"
  name="project_start_date"
  value={startDate}
  onChange={(e) =>
    setCategoryData({...categoryData,startDate: e.target.value,})}
  /> 
  )
}

 

 

참고 : 리액트 훅 폼 어떤데?

- https://velog.io/@pingu944/react-hook-form-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B02
- https://bum-developer.tistory.com/entry/React-useForm
- https://velog.io/@junghyeonsu/React-useForm

---

프로젝트 진행 상황

✓ 모름..

✓ 각자 관리..

회고

이슈가 스물 스물~

 

오늘 이슈 모음

( 오늘 공유받았던 주요 이슈 모음 )

1. (모두: 해결) Policy Anon 문제, 로그인시 프로젝트가 안불러와진다ㅋ
-> anon 만 권한 줌;

-> authenticated 사용자도 권한 줘라

2. (쟝/쥐: 해결) 포지션 / 테크스택 불러오는 법  모르겠다? (db에 둘의 연관 관계가 설정되어있지 않음)
- 프로젝트에 딸린 포지션
- 프로젝트에 딸린 테크
(이미 중간테이블인 Project-tech 에 포지션아이디가 필요한가..(이렇게하면 3d data 되어서 복잡하고 잘못된 구성이라함.))
-> 포지션-테크 중간 테이블을 하나 더 만듬

-> 해결이긴한데 아직 불러와 보지는 않음ㅋ

 

3. (미뇽: 해결) Use Client 선언한 클라이언트 컴포넌트? 혹은 페이지에서 fetch를 위해 서버 컴포넌트를 만들려면!

-> children으로 만들어줘야한다.
->공식 링크 : https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components 

4. (쟝: 해결) Props {} 안감싸줘서 db에서 받아온 data가 data: {…} 으로 한곂 곂쳐지는 문제;; ?
Props 내려주는 법은 왜 이런지 모르겠지만
{ strData } : {strData : string}그래서 보통
Interface Props {
strData : string
}Const function Acomponent({strData} : Props ) {}
이렇게 내려준다.

 

5. 효짱 문제는 뭐였는지 뭐르겠다.. 그것도 대충 db와 props와 dataType의 문제 !
profile이 users의 user 하나라면 any 말고 Tables<"users">  타입 주면 될듯하다..

---

내 진행 상황 

오늘 한일

1. 컴포넌트 분리 및 data 연결, 근데 그안에 해줄일이 왜이렇게 많은가..?

2. 선택 되거나 값이 생겼을 때 빨간색 border 설정하기 

 

남은 일 ㅇ0ㅇ????

TODO 1 :  (editor / Category) 포지션/스택 입력받기 체크박스? tech 배열로 저장?

TODO 2 : (Category)  컴포넌트로 분리...

TODO 2 : (Category) child 모두에 같은 스타일링 하는 법 있음 !

TODO 3 : (Category) 옵션 스타일링... 왜안돼!!! -> li로 바꿔야하나, 지역 data인데 value는 1,2,3,4로 처리해도 될까

TODO 4 : (Category) 유효성검사 - 날짜 오늘날짜 이후,종료일은 시작날짜 이후로만 선택되게하기

TODO 5 : (Category) 나중에.. 서버에서 받아온것들로 뿌려주기 / 하드코딩하면 position_tech 테이블 의미 없긴 함?

TODO 6 : (Category) 프로젝트 화면 검색버튼 ?? .. -> 은비?;; 

TODO 7 :  (editor) 첨부파일 넣는 곳

TODO 8 : 유저아이디 -> 로그인 유저 데이터로 읽어오기
TODO 9 : 뷰어? 적용 (상세페이지 : editor를 글쓰기안되는 버전으로)

TODO 10 : 상세페이지는 내용 html Tag 떼고 보여주기 (cheerio 여기도 쓰면되나)

TODO 11 : 유효성 검사 (페이지 아웃 시 나가시겠습니까.) 

 

오늘 나머지 공부 (21시~ 달려!)

1. position / tech data 저장하기 !!! 

2. 첨부파일 사진도 저장할 수 있을까요.. 화잇.팅.