reactquery 동적 사용 원래 리액트 쿼리는 이런형태로 사용을 했었다. const{ data } = useQuery("name", getdata); 그렇다보니까 usemutation의 post나 delete같은 행동으로 쿼리초기화를 해주지 않는 이상 최신정보를 잘 못가져오는 단점이 있었다. 그래서 쿼리의 동적 사용을 위해 아래와 같이 const{ data } = useQuery(["name", state], getdata); 매번 바뀌는 무언가를 넣어주면 그것이 바뀔때마다 쿼리 이름이 바뀌기 때문에 그때의 최신 정보를 가져온다고 한다. 전처럼 string으로 쓰면 쿼리이름이 매번 같기때문에 이미 전에 있던 정보를 가져 오는 것 이다.
친구 삭제 수정 저번에 했던 친구 삭제 방식 (친구 요청 하면 uuid로 저장되고 상대방이 수락할때 그 uuid +1로 저장하고 친구 삭제할땐 uuid, uuid+1, uuid.slice모두 삭제하는 방식)은 비효율적인거 같다고 생각되어 수정하게 됐다. 우선 친구 요청과 친구 수락모두 각각의 uuid로 저장되게 했다. //친구 수락 const friendAddOnClick = async (i: FriendSearchProps) => { let friendAdd = { id: uuidv4(), myId: myId, friendId: i.id, myNickName: myNickName, friendNickName: i.nickname, }; try { //상대와 친구가 돼있는지 검사후 이중 저장 방지 con..
온라인 오프라인 전환 온라인 오프라인 공유를위해 dbjson에 온라인 정보를 저장하는 방식을 사용했다. 백엔드가 가능하면 더 나은 방법이 있을 것 같지만 dbjson만으로 생각해본 방법은 이거였다. 우선 polling을 이용해 로그인 한사람의 타임스탬프를 30초마다 찍어준다. // 타임스탬프 찍어주기 const dataApi = async () => { const rankApi = () => axios .get(`http://localhost:3001/auth/${ProfleSteamId}`) .then((response) => { const i = response.data; axios.put(`http://localhost:3001/auth/${ProfleSteamId}`, { ...i, lastLog..
리액트 네이티브 Todolist 메인화면 만들기 기본적으로 Text, TextInput, View등 사용할 태그들은 모두 import해온 후 사용해야 한다. css스타일링 방법엔 inline styling StyleSheet Styled Component Tailwind 등이 있다. 이중에 styled component를 사용했는데 react native에서는 기본 사용했던 styled component가 아니라 emotion native (https://emotion.sh/docs/@emotion/native)를 사용하는게 편하고 호환이 잘 된다. 설치 후 npm install @emotion/react @emotion/native import import styled, { css } from '@em..
투두리스트 안 보고 처음 부터 만들어 보기 우선 npm create react-app . 으로 환경을 만들었다. 1. components 폴더와 css폴더를 만들었다. 2. app.jsx에 Header, Input, Contents, Contents 순서대로 컴포넌트를 선언했다. 3 Header컴포넌트로 헤더를 만들었다. 4 내용을 담을 배열을 todoContents로 선언하고 const[todo, setTodo] = useState(todoContents); 로 state를 선언했다. 5. Contents컴포넌트 안에 Todo,done제목은 active를 통해 삼항연산자로 작성해주고 TodoList컴포넌트를 선언했다. 6. TodoList컴포넌트에 작성하면 나올 내용의 구조를 만들어주고 props로 받..
함수형 프로그래밍 클래스 X 리액트는 사용자가 만들어놓은 jsx코드를 렌더링 하는데, state와 props 의 변화에 따라 동적으로 렌더링을 함! 1. 하위태그에서 props로 컴포넌트를 연결 return div안 여는태그와 닫는태그 안에있는건 하위컴포넌트에서 children으로도 받을수있음(구조분해할당 가능) ㄴ children.props로도 가능 2. 하위 컴포넌트에서 props로 받고 그곳에서 jsx 조작 (props로 받은걸 {???.props}로 받을수도있음) 3. 빈태그를 이용하면 return안에 바로 여러 div설계 가능 4. input안에 value={value} 는 입력값을 뜻함 onchange value를 입력하려면 state에 넣어서 화면을 갱신되게함 onchange로 change가..
react 프레임워크 다른 셋팅들을 아직 다 하기 힘들기때문에 yarn create react-app sample-project로 생성 리액트를 구동할땐 파일들어가서 터미널로 yarn start index는 id를 가진애를 끌어올뿐 모든일은 컴포넌트 안에서 일어남 모든 컴포넌트는 함수 맨위는 import 그밑은 함수 안에 Js들어가는부분 그안에 return으로 jsx들어감 맨 밑에 export 화면을 랜더링 하는 기준 -> props(구조분해할당 으로도 가능), state state는 항상 useState로 묶여있어야함 전개연산자(중요)
