React/React_Project 썸네일형 리스트형 [React] 팀원 구성 박스 구현 기능 요약 1. 입력 내용을 State의 배열 형태로 저장 2. 포지션 추가 시 팀원 구성 박스 생성 3. 해당 포지션 클릭 시 이름과 역할 추가 생성 3-1. 이름과 역할이 작성되지 않았다면 생성되지 않음 4. 생성된 박스과 이름,역할을 삭제 1. State 배열 형태로 저장 const [teamInfoBoxes, setTeamInfoBoxes] = useState([ { id: 1, addInfo: false, infoData: [{ id: 1, name: '', position: '', role: '' }] }, ]); 팀원 박스와 이름 역활 데이터를 각각 저장하는 2차원 배열 형태로 저장 id : 팀원 박스 addInfo : 팀원 박스를 추가하는 트리거 infoData : 팀원 박스 내 입력한 정.. 더보기 . 이미지 스토리지 만들기 // 이미지 파일 관리 const [attachment, setAttachment] = useState(); state를 먼저 만듬 input type file을 통해서 image파일만 가져올 수 있게하기 {/* 이미지 파일을 업로드하기 위한 input */} input file type이 변경됐을 때 함수 실행 const onFileChange = (event) => { // event.target.files 에 파일 위치 존재 console.log(event.target.files); // event 안의 target 안으로 이동해서 files을 가져오라는 뜻 // 즉 event.target.files과 동일 ES6 문법 const { target: { files }, } = event; 이벤트 발생.. 더보기 [React] {nweets.map( (User) => ( ))} 글을 작성한 사람의 id와 로그인 한 대상의 id가 같은지를 판단해서 Nweet에 true false를 전달 {isOwner && ( Delect Button Edit Button )} 글 작성자와 로그인 한 대상의 정보가 같을 때 버튼 활성화 전역 객체의 함수를 사용하기 위해 window.confirm 사용 간단한 클릭 이벤트를 이용해서 더보기 [React] Farebase를 이용한 웹 사이트 만들기 firebase에서 데이터 가져와서 fir const [nt,setN]= useState(""); const [nts,sets] = useState([]); const gets = async ()=>{ // 여기서 쿼리란 collection - 문서 를 말함 const nts = await getDocs(collection(dbService, "DBTable")); nweets.forEach((doc)=>{ // set 함수 선언 시 값 대신 함수를 전달 가능 // 함수 전달 시 리액트는 이전 값에 접근 가능하게 해줌 // 즉 현재의 배열(doc.data()) -> 이전 배열(...prev) 순으로 정렬 const nObject = { ...doc.data(), id: doc.id, } sets((pre.. 더보기 이전 1 다음
