React3 React Hooks - useRef 정리 함수형 컴포넌트 내부에서 useRef를 호출하면 ref 객체를 반환하고 그 모양은 { current : value } 처럼 생겼다. 고로 useState때와 같이 내부의 초기값인 value는 current의 값이 된다. ref 객체는 수정이 가능해서 아래와 같이 이처럼 반환된 ref는 컴포넌트 전생애주기를 통해 유지되고 컴포넌트가 계속 렌더링 되어도 unmount 되기 전까진 값을 유지할 수 있는 장점이 있다. useRef의 쓰임으로 크게 두가지가 있다. 1.저장공간(변수개념) 2.DOM요소에 접근(로그인 조건 포커스테두리 효과) 1.저장공간(변수개념) count를 올리면 렌더링이 다시되는지, 몇번되는지 세어주기 위한 renderCount State 이 있을때 count의 값을 올리는 button을 누르.. 2023. 4. 30. Redux의 데이터 흐름 , FLUX 패턴 Redux의 데이터 흐름 React에서의 기본적인 데이터 흐름은 하향식으로 단방향이다. 그리고 자식 컴포넌트3, 6 에서 사용되는 State 들을 처리할땐 그 상태는 최상위 컴포넌트에 존재해야 한다. 하지만 이러한 방식이 자식과 최상위 컴포넌트 사이에 수많은 컴포넌트가 존재 한다면 State 끌어올림과 props 내려주기를 수많이 반복해야 하기 때문에 비효율적으로 보일 수 있다. Redux라는 상태관리 라이브러리를 사용한다면 전역 상태를 관리할 수 있는 저장소인 store를 통해서 데이터가 전달되기 때문에 위의 문제를 깔끔하게 해결 할 수 있다. FLUX 패턴 Flux 패턴은 2014년 페이스북에서 발표한 아키텍쳐이고 Client-Side 웹 어플리케이션을 만들기 위한 디자인 패턴이다. 초기에 어플들이 .. 2023. 2. 24. React Props & State 리액트에서 데이터를 다루는 방식에는 props, state 두 가지 방법이 있다. (JSX 문법, SPA, React Router의 사전 지식이 필요하다) State는 살면서 변할수 있는 값 ( 후에 변할 수 있는값 ) => 컴포넌트 사용 중 컴포넌트 내부에서 변하는 값을 의미 Props는 외부에서 즉 가장 가까운 부모함수에게서 받은 값을 의미한다. ex) State 값 : 나이, 사는 곳, 결혼/연애 여부, 취업여부 => on/off 여부, count 숫자 값 (컴포넌트 내부) Props값 : 이름, 성별 읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 s.. 2023. 1. 27. 이전 1 다음
