React.js (6) 썸네일형 리스트형 Redux 알아 보기 액션 (Action) 리덕스의 상태 값을 수정하는 유일한 방법: 액션 객체와 함께 dispatch 메서드 호출 타입 속성값을 가진 자바스크립트 객체 (* type 속성 값이 꼭 존재해야 함) type 속성값으로 액션 객체 구분, type 속성값을 제외한 나머지는 상태 값을 수정하기 위해 사용되는 정보 액션 객체에는 type 속성 값 외에도 원하는 속성 값을 넣을 수 있음 dispatch 메서드가 호출된 순서대로 리덕스 내부에서 상태 값 변경 리듀서 (Reducer) 액션이 발생했을 때 상태 값을 변경하는 함수 useReducer를 작성할 때와 똑같은 형태를 가지고 있음 Action(액션)에서 발생하는 dispatch() 메소드를 사용하여 reducer 호출 (state, action) => nextSta.. 리덕스의 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 전체 상태 값을 하나의 객체(스토어)에 저장해야 한다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 상태는 읽기 전용이다. 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 상태값은 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경(리듀서 함수)은 순수함수로만 가능하다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 똑같은 파라미터로 호출 된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다. Hook이란? 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 사용 할 수 있게 해주는 함수 useState를 이용하여 함수형 컴포넌트에서도 상태 변수 선언 가능 useEffect를 이용하여 라이프 사이클 관리 가능 최상위(at the Top Level)에서만 Hook을 호출 (반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출X) 오직 React 함수 내에서 Hook을 호출 (일반적인 JavaScript 함수에서 호출X) useState const [ 상태이름, 상태를 변경할 함수 이름(속성값) ] = useState(초기값); 상태(동적인 값)를 관리할 때 사용한다. 값을 변경할 때 절대 상태를 직접 변경하는 것이 아닌 상태변경 함수에 값을 전달하는 방식으로 변경한.. 리액트 컴포넌트의 Life Cycle 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작하여, 페이지에서 사라질 때 끝난다 Mounting(생성 될 때), Updating(업데이트 할 때), Unmounting(제거 할 때) 세 가지 Mounting : DOM이 생성되고 웹 브라우저에 나타나는 것 Updating : 컴포넌트가 업데이트 될 때 (props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, 강제로 렌더링 할 때) Unmounting : 컴포넌트가 DOM에서 제거하는 과정 React.js 컴포넌트 선언 방식 함수형 컴포넌트 React 공식 문서에서는 함수형 컴포넌트 사용을 권장 함수를 기반으로 작성하는 컴포넌트 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드 클래스형 컴포넌트 Class형 컴포넌트의 state 선언 방식과 함수형 컴포넌트의 state 선언 방식이 다름 반드시 super(props)를 호출 (선언 전 까지 this 키워드 사용 X) state의 이름과 초기값을 constructor(생성자)에서 설정 render() 함수에서 this.state를 사용하여 state에 새로운 값 넣을 수 있음 React.js 특징 스터디 하면서 정리한 걸 올려봅니다. React.js 특징 페이스북에서 개발하고 관리 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 단 반향 데이터 흐름을 갖는다 컴포넌트 기반이므로 컴포넌트가 스스로 상태 관리 (Hook 을 이용한 함수형 컴포넌트 선언 방식 권장) React의 상태가 업데이트 되면 React의 비교 알고리즘을 통해 Virtual DOM과 실제 DOM을 비교하여 차이가 나는 부분만 실제 DOM에 업데이트 방식 UI 데이터 리액트에서 UI데이터는 반드시 속성값과 상태값으로 관리 상태값 : 컴포넌트 내부에서 해당 컴포넌트가 관리하는 값 속성값 : 부모 컴포넌트에서 내려주는 값, 불변 변수 이전 1 다음
