분류 전체보기91 react port 번호 변경하는법 2021. 8. 10. Custom hook 무언가 중복되는 훅s 들의 세트들이 보인다면 커스텀 훅으로 만들자! hook은 컴포넌트 안에서만 작성이 가능하다 custom 훅은 예외다 id 기준으로 보겠다. 1. 처음 useInput('') 호출 한다. return 값 받음 [value,handler] 2. onChange 될때마다 handler( ) 함수 호출 3.handler호출 될때마다 id의 상태변경 --->해당 컴포넌트(Signup) 리렌더. --> useInput 다시호출 바뀐 value [value, handler] 리턴 4.useInput 의 return 값 받음 [value,handler] const [value , 콜백함수] = useInput(''); 콜백함수에서는 value 를 업데이트 해야한다!! 2021. 8. 8. 프론트엔드 개발자의 협업 ( 더미데이터 dummy data ) 백엔드개발자가 API 를 만들동안 더미데이터를 만들고 있어야한다. - 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미 (시간적 손실을 방지하고자) https://ko.wikipedia.org/wiki/%EB%8D%94%EB%AF%B8_%EB%8D%B0%EC%9D%B4%ED%84%B0 더미 데이터 - 위키백과, 우리 모두의 백과사전 정보과학에서 더미 데이터(dummy data)는 유용한 데이터가 포함되지 않지만 공간을 예비해두어 실제 데이터가 명목상 존재하는 것처럼 다루는 유순한 정보를 의미한다. 더미 데이터는 테스트 및 ko.wikipedia.org 서버가 없는데 로그인을 어떻게 할까. 더미데이터를 만들면된다. const [isLoggedIn,setIsLoggedIn] =useState(.. 2021. 8. 4. React Router SPA 어떤 주소에서 어떤 URL 을 보여줄지 클라이언트에서 결정한다. SPA 를 사용하면 서버는 서버의 자원을 아끼고 클라이언트는 더 좋은 사용자 경험 가능. 동적인 값이 필요할 경우 특정 API를 서버쪽에 요청해서 필요한 데이터만 제이슨 형태로 받아와서 보여줌. 리액트라우터 컴포넌트 기반으로 라우팅한다. 경로 이동을 한다 해서 태그를 사용하면 안된다. 애플리케이션이 새로 로딩이 되기 때문이다. 고로 Link 컴포넌트를 사용하자 띄워져 있는 앱에서 경로만 바꿔준다. 유저로부터 받아온 URL 파라미터 값을 읽어올 경우 컴포넌트의 props 를 통해 match 를 사용하자 Route와 연결된 컴포넌트는 props로 location,match,history 사용 가능 파라미터 여러개 넣어주고 싶을 경우 쿼리.. 2021. 8. 2. react-redux 1.액션타입. (대문자 작성) 2.액션 생성 함수 (export) 3.리듀서에서 관리할 초기 state. 4.리듀서 (export default) /modules/index.js combineReducers 를 이용해 rootReducer 을 만들자. rootReducer 에는 counter,todos를 포함한 모든 reducer가 있다. 1.스토어(리듀서) 생성. 2.Provider ? 자식 컴포넌트에 Redux 스토어(store)를 제공하는 컴포넌트 컴포넌트에서 스토어에 접근해 상태 변경을 요청(dispatch)하거나, 구독(subscription)된 상태가 업데이트 되면 다시 렌더링 된다. useSelector( selector 함수 ) redux 스토어의 현재 상태 조회 훅. Redux 스토어의 .. 2021. 7. 13. Redux-상태관리 action 상태를 어떻게 바꿀지에 대한 행동 . type 값은 필수. payload : '교체할 상태 값'. 액션 타입을 별도 관리하는 파일을 만들어 상수(constant)로 관리하는 것이 유지 보수 하기 좋다 reducer state,action을 매개변수로 받고 새로운 state를 반환 후 -> store로 전달. Redux 의 3가지 규칙 1.하나의 애플리케이션엔 하나의 스토어만 있어야한다. 2.상태는 불변성을 유지해야한다. (좋은 성능을 지켜내기 위함) 객체를 참조해서 수정하지말자 member.isLoggedIn = true; (x) read 만하자 (ㅇ) 이전의 state와 현재의 state가 달라야 추적가능. 참조관계가 유지된다면 history 가 안남는다. 3.리듀서는 초기 state와 a.. 2021. 7. 12. useReducer( ) useReducer( ) 상태를 업데이트 하는 함수 컴포넌트 밖에 생성하자! useReducer 를 사용해주기 위해서 첫번째로 reducer(state,action) 함수를 생성하자. (업데이트된 state를 반환하는 함수.=reducer) action 은 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용 useReducer 은 action 객체를 기반으로 상태를 업데이트한다. dispatch(action객체) 리듀서 함수 실행! 언제 useState( ), useReducer( ) 를 사용하여야 할까? 컴포넌트에서 관리하는 값이 1개고 그값이 단순한 숫자,문자,불리언 이런 경우 useState로 관리하는게 편할것이다. 반면, user 라는 배열에 추가,수정,삭제 이런 복잡.. 2021. 7. 8. 이전 1 2 3 4 5 6 ··· 13 다음
