프론트엔드/React35 유저기능 - 인증 / 인가 최종 수정 : 2024-06-17유저기능인증과 인가를 합친 것을 통칭하여 말한다. 인증(Authentication)클라이언트와 서버는 인증서를 사용해서 리퀘스트를 보낸 유저가 누구인지 파악한다. 서버가 리퀘스트를 보낸 유저가 누구인지 파악하는 것을 '인증'이라고 하며, 이 인증서에는 두 가지 종류가 있다. 작동하는 원리에 따라 각각 세션과 토큰이라고 부른다. 세션을 사용하면 세션 기반 인증, 토큰을 사용하면 토큰 기반 인증이라고 한다. # 쿠키 인증쿠키(Cookie)란 이름-값 쌍, 속성으로 구성되어 있으며 서버 리스폰스나 클라이언트 코드에 따라 브라우저에 저장되는 작은 단위의 문자열 파일들을 말한다. 속성에는 서버에서 정한 만료일이나 보안 설정 등 다양한 내용들이 담겨 있다. 서버 리스폰스의 Set-.. 2024. 6. 17. useRef() 최종 수정 : 2024-06-17useRef()ref라는 속성에 적용하는 값을 만들어 주는 훅이다.컴포넌트에서 지정된 값 대부분은 애플리케이션의 사용자 인터페이스에 직접 표시된다. 그러나 때로는 사용자가 사용하기 위해서가 아니라 앱 메키너즘의 일부분으로만 변수를 사용할 때가 있다. 어느 경우든, 사용자에게 값을 표시할 필요가 없으므로 값이 달라져도 자동으로 재렌더링이 일어나지 말아야 한다. 즉, 상태 값을 관리하되 상태 변경 시 리액트가 UI를 재렌더링하는 일을 피하고 싶을 때는 useRef()를 사용한다. # ref 속성이란?모든 리액트 컴포넌트는 reference의 앞 글자를 딴 ref 속성을 제공한다. ref 속성값은 사용자 코드에서 설정하는 것이 아니라 어떤 시점에 리액트 프레임워크 내부에서 설정.. 2024. 6. 17. useState() 최종 수정 : 2024-06-17useState()리액트 훅 함수 중에서 가장 많이 사용된다. 컴포넌트를 위해 리액트가 값을 관리하고 싶을 때 사용한다. # 불변 상태를 캐시하는 useStateuseState 훅은 가변 상태를 캐시한다. useState 훅이 반환한 세터 함수는 리액트가 컴포넌트 내부의 생태 변화를 쉽게 감지할 수 있게 해준다. 즉, 세터 함수가 호출되면 컴포넌트의 상태에 변화가 있는 것으로 판단하고 즉시 해당 컴포넌트를 다시 렌더링한다. 컴포넌트 호출과 호출 사이에 상태를 유지하고 컴포넌트의 상태 변경을 리액트에 알리는 가장 간단한 방법은 useState 훅이다. 상태 관리를 위한 도움을 리액트에게 요청하는 함수인 것이다. useState()를 호출하면, 훅이 최신 상태 값을 반환하면서.. 2024. 6. 17. 리액트 훅(Hooks)과 커스텀 훅(Custom Hooks) 최종 수정 : 2024-06-17리액트 훅(React Hooks)2019년 2월 16.8.0 버전에서 리액트 훅이라는 혁신적인 기능이 등장했다. 'use'라는 접두사가 이름에 들어가는 일련의 함수이며, 반드시 함수 컴포넌트에서만 사용해야 한다. # 리액트 훅 종류용도훅컴포넌트 데이터 관리useMemouseCallbackuseStateuseReducer컴포넌트 생명 주기 대응useEffectuseLayoutEffect컴포넌트 메서드 호출useRefuseImperativeHandle컴포넌트 간의 정보 공유useContext # 리액트 훅의 탄생 배경16.8.0 이전 버전에서 사용자 컴포넌트는 render 메서드를 반드시 구현하는 클래스 기반 컴포넌트 였다. 그런데 클래스에 많은 기능이 숨어 있어 코드가 직관.. 2024. 6. 17. [팀 미팅 질문] React Portal 최종 수정 : 2024-06-04React Portal부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. React 라이브러리에서 제공하는 기능 중 하나로, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해준다. 이 기능을 사용하면 컴포넌트의 렌더링 결과를 다른 DOM 노드로 이동시킬 수 있다.ReactDOM.createPortal(child, container)첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React의 자식 요소이다.두 번째 인자(container)는 DOM 엘리먼트이다. Q. 사용하는 이유리액트는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 렌더링 되는 T.. 2024. 6. 4. 이전 1 2 3 4 5 ··· 7 다음