React
-
6.5장React/실전 리액트 프로그래밍 2023. 3. 10. 15:08
6.5 reselect 패키지로 선택자 함수 만들기 원본 데이터를 다양한 형태로 가공해서 사용할 수 있게 도와줌 리덕스 데이터를 리액트 컴포넌트에서 필요한 데이터로 가공하는 용도로 많이 사용 export const getTodoList = createSelector(getTodos, (todos) => todos.todoList.filter((todo) => !todo.isCompleted) ); createSelector를 사용하여 매개변수로 들어온 getTodos 값이 변하지 않으면 계산을 수행하지 않는다. 메모제이션 기능을 이용하여 이전값과 비교하여 변경되면 변경된값을 연산을 수행하고 아닌 경우 이전값을 그대로 사용한다. 상태값 외에도 속성값을 입력 받을 수 있다. // FriendMain expo..
-
6.4장React/실전 리액트 프로그래밍 2023. 3. 10. 15:05
6.4 리액트 상태값을 리덕스로 관리하기 리덕스는 JS를 사용하는 모든 곳에서 사용이 가능하다. 리액트의 컴포넌트 상태값과 리덕스의 상태값이 불변 객체이고 이는 변경 여부확인이 빨라 렌더링 속도가 향상된다. 리액트와 리덕스가 궁합이 잘 맞기때문에 자주 사용된다. 6.4.1 react-redux 패키지 없이 직접 구현하기 const reducer = combineReducers({ timeline : timelineReducer, friend: friendReducer }); const store = createStore(reducer); export default store; 스토어를 생성하여 객체를 내보내서 원하는 곳에서 사용가능하게 만든다. // TimelineMain.js const [, force..
-
3.6 장React/실전 리액트 프로그래밍 2023. 2. 10. 21:30
3.6 리액트 내장 훅 살펴보기 다양한 내장된 훅들을 제공한다. 3.6.1 Consumer 컴포넌트 없이 콘텍스트 사용하기 : useContext ContextAPI에서 Consumer 사용없이 Provider로 부터 전달된 값을 사용할 수 있다. function Childcomponent() { const user = useContext(UserContext) } 사용하기 간편한 장점이 있다. 3.6.2 렌더링과 무관한 값 저장하기 : useRef 컴포넌트 내부에서 생성되는 값 중 렌더링과 무관한 현재 쓰지않는 값을 저장한 후 나중에 사용하기 위해 사용한다. 이전 상태를 저장했다가 원하는 곳에 사용하는데 사용됨. 3.6.3 메모제이션 훅 : useMemo, useCallback useMemo 와 use..
-
3.5 장React/실전 리액트 프로그래밍 2023. 2. 10. 21:25
3.5 Ref 속성값으로 자식 요소에 접근하기 돔 요소에 직접 접근해야 할 때 사용한다. Ref(Reference)를 사용하면 자식 요소에 직접 접근할 수 있고, 요소에 포커스를 주거나 요소의 크기 및 스크롤 위치 등을 알 수 있다. 3.5.1 ref 속성값 이해하기 function TextInput() { const inputRef = useRef; useEffect(() => { inputRef.current.focus(); }, []); return ( 저장 ); } useRef 훅을 사용하여 반환된 ref 객체를 통해 자식 요소의 ref 속성값에 객체를 넣는다. 돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근이 가능하다. 컴포넌트의 렌더링 결과가 돔에 반영된 후에 호출해오기 때문에 이미 요소..
-
3.4장React/실전 리액트 프로그래밍 2023. 2. 4. 00:05
3.4 콘텍스트 API로 데이터 전달하기 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해서 속성값이 사용된다. 상위 컴포넌트에서 내가 가고싶은 하위 컴포넌트까지 전달하는데 중간에 거치는 컴포넌트에서도 불필요하게 속성값이 들어가는 무의미한 경우가 발생한다. 이를 방지하기 위해 콘텍스트 API를 이용하여 중첩 구조가 복잡한 상황에서도 원하는 컴포넌트에 쉽게 데이터를 전달할 수 있다. 3.4.1 콘텍스트 API 이해하기 콘텍스트 API를 이용하면 중간에 다른 컴포넌트가 개입하지 않아도 속성값을 전달할 수 있다. const UserContext = React.createContext(""); function App() { return ( 상단 메뉴 하단 메뉴 ); } function Profile() ..
-
3.3장React/실전 리액트 프로그래밍 2023. 2. 3. 23:56
3.3 리액트 훅 기초 익히기 함수형 컴포넌트에 기능을 추가할 때 사용한다. 상태값을 사용할 수 있고, 자식 요소에 접근할 수 있다. 훅이 주는 장점이 되게 다양하고 적극적으로 개발 진행중이라고 한다. 3.3.1 상태값 추가하기 : useState useState를 사용하면 배열을 반환해주고 배열의 첫 번쨰 원소는 상태값, 두 번째 원소는 상태값 변경 함수다. 상태값 변경함수가 호출 될 경우 해당 컴포넌트를 다시 렌더링하고 자식도 같이 렌더링 된다. 상태값 변경 함수는 비동기 동작을 진행하며 배치처리를 진행하여 한번에 처리한다. function MyComponent() { const [count, setCount] = useState({ value : 0}); function onClick() { set..
-
3.2장React/실전 리액트 프로그래밍 2023. 2. 3. 23:54
3.2 리액트 요소와 가상 돔 리액트 요소는 UI를 표현하는 수단이다. 렌더링 성능을 높이기 위해 가상 돔을 활용한다. 기존의 방식은 돔을 변경하면 돔을 다시렌더링 하지만 리액트의 경우 메모리에 가상돔을 생성하여 기존의 돔과 비교한 후 변경된 점만 찾아서 실제 돔에 렌더링 해주는 방식을 사용한다. 3.2.1 리액트 요소 이해하기 JSX 코드 createElement 변환 과정 이해하기 const element = click here; const element = React.createElement( 'a', { href: 'http://google.com' }, 'click here', ); JSX 코드가 createElement 코드로 변환되는 과정이다 한개 더 예시를 살펴보자 const element..
-
3.1장React/실전 리액트 프로그래밍 2023. 2. 3. 23:53
3.1 상태값과 속성값으로 관리하는 UI(User Interface) 데이터 UI(User Interface) 데이터를 컴포넌트 내부에서 관리되는 상태값과 부모 컴포넌트에서 내려주는 속성값으로 관리한다. 리액트를 사용하기 위해서는 결국 상태값과 속성값을 이용해서 구현해야 한다. UI(User Interface) 데이터가 변경되면 화면을 다시 나타내야 한다. UI 데이터가 변동될 때마다 돔 요소들을 직접 수정해야하며 수정하다 보면 코드가 섞이게 되고 복잡해지게 된다. 리액트는 화면의 모든 코드를 컴포넌트 함수에 선언형으로 작성하여 UI 데이터 변경을 감지하여 컴포넌트 함수를 이용해 화면을 자동으로 갱신해준다. 3.1.1 리액트를 사용한 코드의 특징 할 일 목록 추가 서버에 저장> 초기 화면을 구현하고 to..