useRef callback 형식 ref는 조금 되는 녀석을 해본다 React hooks의 문서를 바라보고 있으면, 조금 신경이 쓰이는 useRef의 사용법이 쓰여져 있었다. 언제 어떤 상황에서 사용할 수 있는지도 포함하여 써 간다. 참조를 보고 있는 한, ref로 지정하고 있는 컴퍼넌트가 마운트된 타이밍에서 실행할 수 있는 함수를 ref에 쓸 수 있는 것처럼 보였다. 다시 렌더링되면 함수를 한 번 더 실행할지 시도합니다. 예상: 실행 예상과 달리 첫 렌더링... useRefReact후크 [Udemy] React 기본 - 일기장 만들기(2) src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handleSubmit : 일기 저장하기 버튼을 눌렀을 때 수행되는 함수를 수정 ☑️ 작성자란(input)에 1글자 미만, 일기본문(textarea)가 5글자 미만일 경우 조건 추가 (al... useRefproject유데미udemy한입크기로잘라먹는리액트DOM리액트DOM [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps [Project-심플다이어리] 글 작성하기 React로 심플다이어리 만들기를 통해 배우기 :) 알게된 것 타겟의 value를 가져오는 비슷한 구조일때는 state를 따로 나눠쓰지 않아도 객체를 활용해서 사용할 수 있다. 이벤트핸들러도 한개로 활용할 수 있다. 다시 입력을 원할 때 focus주는 방식의 useRef 사용법 🔽 state를 객체로 합쳐 사용하기 onChange의 콜백함수는 매개변수 e(event)를 가져옴 => e.tar... eventhandleruseRefReactStateprojectReact [TIL #31] null을 return하는 useRef 문제 발생 토이 프로젝트를 진행하면서 Modal을 구현하고 있는데, Modal의 상단 부분의 높이를 Modal의 하단 부분에 전달하고 싶어서 간단하게 구현해보았다. 우선 상단 높이를 저장할 clientHeight state를 생성하고, 상단 부분의 DOM 높이를 측정하기 위해서 useRef를 통해 상단부분의 ref 값으로 설정했다. 문제 코드 그러니 topRef.current.clientHe... useRefuseCallbackTILTIL [42byte] 모달 영역 바깥쪽 클릭시 모달 닫기 다른 댓글의 더보기를 클릭해도 이전에 클릭했던 더보기를 비활성화시킬 수 없다! 더보기 아이콘을 누른 상태(true)로 신고/삭제 모달이 열리고, 그 상태에서 바깥쪽을 누르면 비활성화가 되어 모달이 사라져야 한다. 구글링을 해보았을 때, 모달 영역 밖을 클릭시 모달 닫기를 위한 방법은 2가지 정도가 있다. 1. 바깥쪽 영역 전체를 감싸준 뒤(ModalBackdrop), 모달이 활성화되어 있을 ... ReactCSSuseRefaddEventListenerCSS [Mission3] swiper, useReft, github 배포 모달 창 외부를 클릭했을때 모달 창이 닫히게 만들어주자 이는 useRef를 활용하면된다. useRef 특정 DOM을 선택할 때 사용하는 React Hooks 원래..JS에서는.. -> 클래스 컴포넌트 -> React.createRef -> 함수형 컴포넌트 -> useRef DOM을 직접 선택해야하는 경우들 엘리먼트 크기를 가져와야 할 때 스크롤바 위치를 가져와야 할 때 엘리먼트에 포커스를 설... ReactsiwperuseRefReact 19) 사진파일은 왜 주소형태로 불러오게 될까염 🧐 cloud storage service, 이미지 프로세스 이해, 게시글에 내 사진을 등록해보자 ! ( map안의 map, Reduce, 고정데이터 객체사용,,) Code-Camp FE 6기 firebase를 임포트 해와서 useeffect로 쓴 부분 잘 보고 나도 포폴에 만들어보자 ! 우리는 이미지를 다운받을수 있는 주소를 넣으면 ..! 파일이라는 객체를 state에 저장해도 되고 변수로 저장해도 되고, 백엔드 api에서는 파일을 storage에 저장하고, 그러면 storage는 파일을 다운받을수 있는 주소를 백엔드를 통해 프론트엔드에 넘겨준다 실제 이미지를 데이터에 넣으려면 ... cloud storage serviceuseRef이미지프로세스파이어베이스클라우드프로바이더FirebaseFirebase 블로그 API 클라이언트와 연결하기 -2- 회원가입 페이지 아무정보도 없이 회원가입 요청을 보냈을때 응답 --->클라이언트에서 에러핸들링 (정보를 입력해달라는 메시지) 정보를 모두 입력했을때 같은정보로 한번 더 회원가입 했을때 ---> 라우터에서 에러핸들링 (username, email 이 중복될때 조건 추가, 문맥에 맞는 err제공) 에러핸들링 try..catch로 console.log(err) const [error,setErro... useRefAPInodejsDispatchreducercontextAPIReactAPI Effect Hook (feat. lifecycle in React) 함수 컴포넌트의 useEffect Hook은 class 컴포넌트의 생명주기로 미루어 봤을 때, componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 봐도 좋다. 여기서 이 함수를 ‘effect’라고 부른다. useEffect를 컴포넌트 내부에 두는 이유는, effect를 통해 state 변수(또는 그 어떤 prop에도)에 ... focus생명주기lifecycleuseRefhookuseEffectfocus TIL - 55 React 에서 DOM 을 접근할 수 있다? (O/X) 접근 할 수 있다. useRef()를 사용하자! 위 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출 - > . 이름 input 에 포커스가 잡힌다. 배열의 랜더링 배열을 랜더링 할때는 key 값에 id를 붙여준다. key값을 배치하지않으면 동적으로 배열을 쓰지 못한다. react에서 배... ReactuseRefReact hooks 에서 ref 사용하기 hooks 에서는 ref를 사용할 수 없는데, 가능하게 해준 것이 바로 useRef 이다. 그리고, 자식 컴포넌트에서 ref를 사용하기 위해선 useImperativeHandle을 사용해야 한다. 사용 예시를 보자. 하고자 하는 것 : 버튼을 누르면 input 에 focus를 준다. 간단하게 코드만 정리해본다. App 은 부모 컴포넌트이고, Component는 자식 컴포넌트이다. 부모에서 자... useImperativeHandleuseRefuseImperativeHandle [항해99] 미니프로젝트(Day2) 2021.04.13(화) 어제에 이어서 회원가입시, 프론트에서 처리할 수 있는 부분 작업 2. Nickname -> 사용자는 input창에 사용하고 싶은 닉네임을 입력하고, 중복확인버튼을 누른다. 📍input에 값을 받아서 그 값으로 뭘 해보자 -> useState 사용! 2.1 사용자가 input창을 클릭하면 info가 출력되고(display='block'), 입력하는 값(e.target.... useRef리액트훅리액트useRef Twitter-Clone (12~13) 📋Memo(CreateProfile.tsx) 🚗 refetchQueries: [{query: ME_QUERY} 1. Refetch queries 🚓 <Modal isOpen={modalIsOpen} ... style={CustomStyles} > 1. Open window called Modal 📋Memo(UpdateProfile.tsx) 🚗 const inputFile = useRef() ... useRefformDataformData 리액트를 다루는 기술 : useRef 일반 HTML + Javascript에서는 Dom요소를 조작하여야 할 때 조작할 HTML tag에 id를 부여하고 Javscript를 통해 DOM 요소를 조작한다. react.js에서도 ref(reference)를 통해 이름을 달아 HTML 요소를 제어할 수 있다. react components(JSX) 안에서 id대신 ref를 통해 DOM 요소를 다루는 이유는 다른 라이브러리나 프레임워크를... 리액트를다루는기술useRefuseRef
callback 형식 ref는 조금 되는 녀석을 해본다 React hooks의 문서를 바라보고 있으면, 조금 신경이 쓰이는 useRef의 사용법이 쓰여져 있었다. 언제 어떤 상황에서 사용할 수 있는지도 포함하여 써 간다. 참조를 보고 있는 한, ref로 지정하고 있는 컴퍼넌트가 마운트된 타이밍에서 실행할 수 있는 함수를 ref에 쓸 수 있는 것처럼 보였다. 다시 렌더링되면 함수를 한 번 더 실행할지 시도합니다. 예상: 실행 예상과 달리 첫 렌더링... useRefReact후크 [Udemy] React 기본 - 일기장 만들기(2) src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handleSubmit : 일기 저장하기 버튼을 눌렀을 때 수행되는 함수를 수정 ☑️ 작성자란(input)에 1글자 미만, 일기본문(textarea)가 5글자 미만일 경우 조건 추가 (al... useRefproject유데미udemy한입크기로잘라먹는리액트DOM리액트DOM [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps [Project-심플다이어리] 글 작성하기 React로 심플다이어리 만들기를 통해 배우기 :) 알게된 것 타겟의 value를 가져오는 비슷한 구조일때는 state를 따로 나눠쓰지 않아도 객체를 활용해서 사용할 수 있다. 이벤트핸들러도 한개로 활용할 수 있다. 다시 입력을 원할 때 focus주는 방식의 useRef 사용법 🔽 state를 객체로 합쳐 사용하기 onChange의 콜백함수는 매개변수 e(event)를 가져옴 => e.tar... eventhandleruseRefReactStateprojectReact [TIL #31] null을 return하는 useRef 문제 발생 토이 프로젝트를 진행하면서 Modal을 구현하고 있는데, Modal의 상단 부분의 높이를 Modal의 하단 부분에 전달하고 싶어서 간단하게 구현해보았다. 우선 상단 높이를 저장할 clientHeight state를 생성하고, 상단 부분의 DOM 높이를 측정하기 위해서 useRef를 통해 상단부분의 ref 값으로 설정했다. 문제 코드 그러니 topRef.current.clientHe... useRefuseCallbackTILTIL [42byte] 모달 영역 바깥쪽 클릭시 모달 닫기 다른 댓글의 더보기를 클릭해도 이전에 클릭했던 더보기를 비활성화시킬 수 없다! 더보기 아이콘을 누른 상태(true)로 신고/삭제 모달이 열리고, 그 상태에서 바깥쪽을 누르면 비활성화가 되어 모달이 사라져야 한다. 구글링을 해보았을 때, 모달 영역 밖을 클릭시 모달 닫기를 위한 방법은 2가지 정도가 있다. 1. 바깥쪽 영역 전체를 감싸준 뒤(ModalBackdrop), 모달이 활성화되어 있을 ... ReactCSSuseRefaddEventListenerCSS [Mission3] swiper, useReft, github 배포 모달 창 외부를 클릭했을때 모달 창이 닫히게 만들어주자 이는 useRef를 활용하면된다. useRef 특정 DOM을 선택할 때 사용하는 React Hooks 원래..JS에서는.. -> 클래스 컴포넌트 -> React.createRef -> 함수형 컴포넌트 -> useRef DOM을 직접 선택해야하는 경우들 엘리먼트 크기를 가져와야 할 때 스크롤바 위치를 가져와야 할 때 엘리먼트에 포커스를 설... ReactsiwperuseRefReact 19) 사진파일은 왜 주소형태로 불러오게 될까염 🧐 cloud storage service, 이미지 프로세스 이해, 게시글에 내 사진을 등록해보자 ! ( map안의 map, Reduce, 고정데이터 객체사용,,) Code-Camp FE 6기 firebase를 임포트 해와서 useeffect로 쓴 부분 잘 보고 나도 포폴에 만들어보자 ! 우리는 이미지를 다운받을수 있는 주소를 넣으면 ..! 파일이라는 객체를 state에 저장해도 되고 변수로 저장해도 되고, 백엔드 api에서는 파일을 storage에 저장하고, 그러면 storage는 파일을 다운받을수 있는 주소를 백엔드를 통해 프론트엔드에 넘겨준다 실제 이미지를 데이터에 넣으려면 ... cloud storage serviceuseRef이미지프로세스파이어베이스클라우드프로바이더FirebaseFirebase 블로그 API 클라이언트와 연결하기 -2- 회원가입 페이지 아무정보도 없이 회원가입 요청을 보냈을때 응답 --->클라이언트에서 에러핸들링 (정보를 입력해달라는 메시지) 정보를 모두 입력했을때 같은정보로 한번 더 회원가입 했을때 ---> 라우터에서 에러핸들링 (username, email 이 중복될때 조건 추가, 문맥에 맞는 err제공) 에러핸들링 try..catch로 console.log(err) const [error,setErro... useRefAPInodejsDispatchreducercontextAPIReactAPI Effect Hook (feat. lifecycle in React) 함수 컴포넌트의 useEffect Hook은 class 컴포넌트의 생명주기로 미루어 봤을 때, componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 봐도 좋다. 여기서 이 함수를 ‘effect’라고 부른다. useEffect를 컴포넌트 내부에 두는 이유는, effect를 통해 state 변수(또는 그 어떤 prop에도)에 ... focus생명주기lifecycleuseRefhookuseEffectfocus TIL - 55 React 에서 DOM 을 접근할 수 있다? (O/X) 접근 할 수 있다. useRef()를 사용하자! 위 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출 - > . 이름 input 에 포커스가 잡힌다. 배열의 랜더링 배열을 랜더링 할때는 key 값에 id를 붙여준다. key값을 배치하지않으면 동적으로 배열을 쓰지 못한다. react에서 배... ReactuseRefReact hooks 에서 ref 사용하기 hooks 에서는 ref를 사용할 수 없는데, 가능하게 해준 것이 바로 useRef 이다. 그리고, 자식 컴포넌트에서 ref를 사용하기 위해선 useImperativeHandle을 사용해야 한다. 사용 예시를 보자. 하고자 하는 것 : 버튼을 누르면 input 에 focus를 준다. 간단하게 코드만 정리해본다. App 은 부모 컴포넌트이고, Component는 자식 컴포넌트이다. 부모에서 자... useImperativeHandleuseRefuseImperativeHandle [항해99] 미니프로젝트(Day2) 2021.04.13(화) 어제에 이어서 회원가입시, 프론트에서 처리할 수 있는 부분 작업 2. Nickname -> 사용자는 input창에 사용하고 싶은 닉네임을 입력하고, 중복확인버튼을 누른다. 📍input에 값을 받아서 그 값으로 뭘 해보자 -> useState 사용! 2.1 사용자가 input창을 클릭하면 info가 출력되고(display='block'), 입력하는 값(e.target.... useRef리액트훅리액트useRef Twitter-Clone (12~13) 📋Memo(CreateProfile.tsx) 🚗 refetchQueries: [{query: ME_QUERY} 1. Refetch queries 🚓 <Modal isOpen={modalIsOpen} ... style={CustomStyles} > 1. Open window called Modal 📋Memo(UpdateProfile.tsx) 🚗 const inputFile = useRef() ... useRefformDataformData 리액트를 다루는 기술 : useRef 일반 HTML + Javascript에서는 Dom요소를 조작하여야 할 때 조작할 HTML tag에 id를 부여하고 Javscript를 통해 DOM 요소를 조작한다. react.js에서도 ref(reference)를 통해 이름을 달아 HTML 요소를 제어할 수 있다. react components(JSX) 안에서 id대신 ref를 통해 DOM 요소를 다루는 이유는 다른 라이브러리나 프레임워크를... 리액트를다루는기술useRefuseRef