Study/React (28) 썸네일형 리스트형 Rules of Hooks react hooks는 use로 시작하는 모든 함수를 말한다. react hook은 react 함수의 direct top level에서 호출해야 한다. 리액트 함수는 다음을 말한다. component function custom hooks ??? 예외 +) useEffect Hook useEffect 내부에서 참조하고 있는 모든 것을 dependency로 주입한다. useContext props chain & context 리액트는 화면에 렌더링 할 여러 컴포넌트로 앱을 구성한다. 이 구조를 component tree라고 부르며, 이 때문에 props chaining이 발생한다. 예를 들어 F가 로그인 컴포넌트 이고, 컴포넌트 A와 C에서 로그인과 관련된 data를 필요로 한다고 해보자. A, C와 F가 공통적으로 공유하고 있는 부모는 App 컴포넌트 뿐이다. 따라서 F의 로그인 state를 App까지 끌어 올린 후에, 다시 App에서 그 데이터를 A, C의 props으로 전달해 주어야 할 것이다. 어플리케이션의 규모가 커지면, props chaining은 아래 예제처럼 복잡하고 번거로워 질 수 밖에 없다. // login form const onSubmitHandler = (e) =.. useReducer what is useReducer? reducer는 state 관리를 돕는 훅으로, useState와 비슷하다. 대신 useState보다 더 많은 기능을 가지고 있기 때문에, 복잡한 state를 관리할 때에는 state 대신 reducer를 사용한다. 복잡한 state란 어떤 state일까? 어떤 state의 업데이트가 다른 state에 의존하고 있다(그래서 최신 state를 보장받을 수 없을 때). 서로 연관있는 state가 여러 개 존재하고 있다(action 객체 데이터나, state를 객체로 관리해서 하나의 state로 관리 가능). How to use Reducer? const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn) s.. useEffect what is Effect? 리액트의 main job이 아닌 모든 것을 effct 또는 side effect 라고 부른다. main | 리액트는 UI를 설계하는 자바스크립트 라이브러리이다. props을 이용해서 UI를 rendering 한다 => 재사용 가능한 component 사용자의 input에 따라 state를 관리하고, UI를 re-rendering 한다 => reacting to user side | 리액트의 main job이 아닌 모든 것 http request 타이머 설정하기 브라우저 storage에 데이터 저장하기 response에 따라서 어떤 데이터를 저장하고 처리하기(사용자의 input을 저장하고, 유효성을 체크하는 것도 side effect에 해당한다). what is useEffec.. useRef What is ref? ref는 reference(참조)를 뜻한다. useRef는 리액트가 제공하는 tool 중 하나로 많은 일을 처리할 수 있는 도구이지만, 이것의 가장 기본적인 역할은 어떤 DOM 요소를 참조하고, 이를 이용해서 어떤 일을 수행하는 것이다. How to use ref? ref는 모든 내장 html 요소에서 사용될 수 있지만, input 요소를 참조하는 것이 가장 흔한 경우 중 하나이다. 예를 들어 사용자가 어떤 값을 입력하고 그 값을 리스트 형식으로 렌더링 한다고 해 보자. 이 때 input의 값이 변할 때 마다 실행되는 onChange에서 state를 업데이트한다면 어떨까? 최종적으로 필요한 것은 사용자가 제출 버튼을 클릭했을 때의 input 값이므로, 사용자가 키를 누를 때마다 s.. Fragment & Portal React tools for semantic HTML React.Fragment JSX 코드는 다음과 같은 한계를 가지고 있다. Root 요소는 1개보다 많을 수 없다. jsx 컴포넌트는 리액트의 createElement 함수를 실행하는데, 이 함수는 배열을 반환한다. root element가 여러 개라면 여러 개의 배열을 반환해야 한다. => JS에서 유효하지 않은 구문이다. children element는 nested array가 되기 때문에 유효하다. React.createElement( 'div', { className... }, createElement('p', , ), ...) div soup | 1의 이유로 태그를 남발하게 될 수 있다. => no semantic, low performanc.. Component Styling Dynamic Styling | Validation form을 제출하는 이벤트가 발생했을 때, 사용자가 input에 입력한 값의 유효성에 따라 스타일링에 변화를 줄 수 있다. 유효한 값을 제출하면 input의 border를 초록색으로, 그렇지 않으면 빨간색으로 보여주는 것이 가장 대표적이다. inline style const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(''); const [isValid, setIsValid] = useState(true); const goalInputChangeHandler = (event) => { setEnteredValue(event.target.value); }; cons.. Conditional contents && operator const Expenses = (props) => { const [filterYear, setFilterYear] = useState('2022'); const filterd = props.expenses // .filter((item) => item.date.getFullYear().toString() === filterYear); return ( {filterd.length === 0 && no item} {filterd.length !== 0 && filterd.map((item) => ( ))} ); }; if const Expenses = (props) => { const [filterYear, setFilterYear] = useState('2022'); const fil.. 이전 1 2 3 4 다음
