REACT (15) 썸네일형 리스트형 [ React ] Element, Component, Instance 개념정리 ( with - React가 DOM Tree를 파악하는 방법 ) 영상을 보고 정리한 글입니다! ( https://www.youtube.com/watch?v=QSJUTS9PScY ) 기존 UI model(OOP)의 문제점 아래 코드를 참고해 설명하자면, button의 속성(isSubmitted, buttonText)에 따라 버튼이 화면에 그려지거나( this.button.render() ) 제거( this.button.destroy() )되는 등의 관리가 필요하다. 각 컴포넌트가 많아지면, 버튼 같은 instance도 많아지고, 이 instance를 조작하는 코드를 일일히 조작해주어야 하는 부분도 많아져 관리할 코드가 늘어나고, 이렇게 되면 부모 컴포넌트와 자식 컴포넌트의 분리가 어려워진다. class Form extends TraditionalObjectOriente.. [ React ] React Hooks 정리 6 - useReducer useReducer state를 업데이트 할때 사용 dispatch(state를 업데이트 하기 위한 요청) action(요청내용)을 담아서 reducer에게 전달하면 state를 업데이트 시킨다. useReducer로 생성한 state는 useReducer에 인자로 전달된 reducer에 의해서만 값이 변경된다. reducer로 sate를 변경하는 과정 1. dispatch가 만들어준 useReducer함수에 action이라는 인자를 넣어서 reducer에게 전달해주면 2. reducer가 호출되어 reducer의 두번째 인자인 action으로 전달되고 그 action에서 값 변경후 return 한 값이 3. useReducer로 생성한 state의 값을 변경한다. action은 object로 전달하는데.. [ React ] React Hooks 정리 5 - useCallback ( + useMemo와 차이점 ) ‼️useMemo에 이어서 useCallback에서도 일단 알고 진행해야하는 개념 메모이제이션 메모이제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 이전에 계산한 값을 자료구조에서 꺼내 재사용하는 것을 말한다 useCallback 사용형태 인자로 전달한 콜백함수 자체를 메모이제이션 해주는것 ! const func = useCallback(()=>{ // 메모이제이션해줄 값 ( 함수 또는 값 ) }, [ 의존성 배열 ] ) useCallback을 사용하면 컴포넌트가 재렌더링이 일어나도 초기화 되지 않고 메모이제이션 된 함수 자체를 계속 갖고 있으면서 재활용 한다. useMemo와 비슷한데 차이점은 useMemo는 값을 메모이제이션하여 의존성 배열에 있는 값의 변경을 감지하여 캐싱.. [ React ] React Hooks 정리 3 - useRef useRef 1. 변수관리 할때 사용 - 리렌더링이 일어나면 안되는 경우 2. Dom 선택시 사용 1 - 1 . 변수 관리 state가 변경될때마다 컴포넌트는 렌더링이 일어나서 성능이 안좋아질 수 있음 리렌더링을 발생시키지 않으므로 변화를 감지해야 하지만, 그 변화가 렌더링을 발생시키면 안되는 경우에는 useRef를 사용한다. const ref사용 변수명 = useRef( 초기값 ) const testRef = useRef(0) console.log(testRef) // {current: 0} /* useRef를 사용한 변수에 값 할당, 사용은 current를 사용한다 */ testRef.current = 2 console.log(testRef) = // {current: 2} console.log(te.. [ React ] React Hooks 정리 2 - useEffect useEffect 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을때 사용한다. 1. 사용 형태 1. 컴포넌트가 렌더링 될때마다 계속 실행 useEffect( () => { // 작업 내용 }); 2. 첫 렌더링 후 한번 실행, 그 이후로는 Dependency array안에 있는 state 변경시에만 실행 useEffect( () => { // 작업 내용 },[ state1, state2 ]); 3. 첫 렌더링될때 한번만 실행 useEffect( () => { // 작업 내용 },[]); // 빈배열 2. cleanup 함수 👉 return 구문을 추가 return 안에 사용한 함수는 해당 컴포넌트가 unmount될때, 또는 다음 렌더링시 불릴 useEffect가.. [ React ] React Hooks 정리 1 - useState useState 컴포넌트의 상태값 관리를 위해 사용. 유동적인 값을 바인딩 하기 위해 사용 state 변경시마다 컴포넌트는 다시 렌더링된다. 컴포넌트 렌더링의 조건👇🏻👇🏻👇🏻 더보기 1. setState로 state 변경이 있을 때 2. 새로운 props이 들어올 때 3. 부모 컴포넌트가 렌더링 될 때 4. shouldComponentUpdate에서 true가 반환될 때 - 기본값은 true로 보통 렌더링이 일어나지만, 개발자가 false로 리턴값을 변경한 경우는 렌더링 되지않음 5. forceUpdate가 실행될 때 1. 사용 형태 const [ 현재상태값(state) , 현재 상태를 변경할수 있는 함수(setState) ] = useState( 초기값 ) useState는 state와 setState.. [ React ] 조건부 렌더링 컴포넌트를 조건부 렌더링하는 부분에 대하여 정리합니다. 코드가 간단하여 굳이 이렇게 안쓰고 더 짧게 쓰는 방법이 있으나 함수형 컴포넌트 작성시 복잡하게 사용할 경우도 있을듯 하여 아래처럼 정리합니다. 1. if문을 사용한 조건부 렌더링 const IsRight = () => { return 맞습니다.; }; const IsWrong = () => { return 틀립니다.; }; function Parent() { const Month = 2; return ( 지금은 2월입니까? ); } function Child({ month }) { if (month === 2) { return ; } else return ; } 2. 인라인 구문 > 삼항 연산자를 사용한 렌더링 const IsRight = () =.. [ REACT ] 컴포넌트, props 사용하기 컴포넌트란? 컴포넌트는 독립적이고 재사용이 가능한 UI를 만들수 있는 단위 이다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이 1. 함수형 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 리액트 공식문서에서 컴포넌트 새로 작성시에는 함수형 + Hooks의 조함으로 만드는것을 추천한다고 한다. 함수형 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하고, 메모리도 덜 사용한다고 한다. (엄청 큰차이는 아니라고) 이전에는 state와 라이프사이클 API의 사용이 불가능했으나, Hooks를 이용하여 사용이 가능하다고 한다. 2. 클래스형 컴포.. [ REACT ]JSX, JSX문법과 예제 정리 JSX는 자바스크립트의 확장 문법이다. React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. JSX 변환 예제 위와같은 코드를 입력하면, 아래와 같은 자바스크립트 코드로 변환되어 렌더링된다. function App() { return React.createElement("div", null, "Hello ", React.createElement("strong", null, "World")) } JSX 문법 1. 반드시 부모 요소는 한개의 태그로 감싸져 있어야 한다. virtual DOM에서 컴포넌트 변.. [ REACT ] reset css 하는 방법 + npm으로 설치 reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. 결론적으로는 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 [ 기존에 사용하던 방법 ( css 파일 추가 ) ] https://meyerweb.com/eric/tools/css/reset/index.html /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, .. 이전 1 2 다음
