react
-
[react] props 를 initialState 로 사용 하면 안되는 이유react 2022. 5. 19. 11:04
state 값은 getinitialState() 함수가 마운트시에 동작하면서 생성이 되고 이후에 state 값은 this.setState 에 의해 변형 되는 식이다. 즉 컴포넌트 마운트시에만 getinitialState() 함수가 동작하기 때문에 prop 값을 initialState 값에 넣어둬도 리렌더 시에는 해당 변경이 반영이 되지 않는다 마운트 이후에 리렌더과정에서 state 값을 변경하고 싶은경우 setState 를 이용해야 한다. 리렌더가 되는경우들을 살펴보면 그이유를 짐작할수 있는데 리렌더가 되는경우는 1.부모컴포넌트 리렌더 2.전달받은 props 변경 3.state 변경 그중 3번의 경우에서 만약에 추가로 getinitialState() 가 동작하는 과정이 끼어 있다고 생각해보자 얼마나 비효..
-
[react] render 함수 와 가상돔에 대하여react 2022. 3. 7. 13:24
- 리액트 컴포넌트에서 렌더함수 안의 jsx 는 실제 Dom 을 조작하는 것이 아니라 가상의 Dom 을 조작하는 것이다. - render() 의 결과는 실제dom 을 의미하지 않고 그형태를 본딴 자바스크립트 객체를 반환한다. (그 객체는 가독성이 떨어져서 그러한 점을 보완하기 위해서 jsx 문법을 사용한다.) 실제dom 이란? 실제돔은 html을 파싱한 결과를 이야기한다. 이는 html 을 javascript객체의 형태로 표현한 결과물을 이야기하며 이러한 dom 들을 트리형식으로 모아놓은것을 dom tree 라고 한다. > dom 트리는 결국 html 을 javascript 와 연결시키기 위해 만든거다 가상dom이 없다면 ? 실제 dom은 브라우저에서 html 을 파싱한 결과물 이고 이후에 css 파일 ..
-
[react] focus 에 대하여(동적,정적포커스,커서위치조정)react 2022. 1. 12. 16:34
input 창에 focus 주고 싶으면 정적으로 주고싶을때는 input 태그에 autoFocus 속성을 넣어주면 된다 근데 동적으로 줘야하는 경우도 있는데 그럴때 ref 를 이용한다. import { useRef } from 'react'; const App = () => { const inputRef = useRef(); useEffect(()=> inputRef.current.focus(),[??]) return ( ) }; 근데 이렇게 동적으로 포커스를 줄때 이미 인풋창에 디폴트 값이 있는경우들이 있다. 예를 들어 @로 시작하는 인풋창이여서 고정으로 있는경우라던가 근데 동적으로 위와 같이 포커스를 잡아주게 되면 포커스는 제일 앞에 위치한다. ㅣ 표시를 커서로 봣을때 내가 원하는 포커싱은 @ㅣ 이런 ..
-
[react] forwardRef 사용해보기react 2021. 12. 30. 13:18
언제 쓰는 거냐? 자식 컴포넌트의 태그에 ref 를 사용하고 싶을때 (=부모컴포넌트에서 자식의 돔엘리먼트를 다루고 싶을때) 예를 들어보자면은 내가 input 에 처음들어갓을때 focus 를 주고 싶어서 useref 를 이용해서 inputRef 를 만들고 useEffect 에서 처음에 inputRef.current.focus() 를 해줘서 돔 엘리먼트를 조작해준다고 하자 위와 같은 상황에서는 forwardRef 가 필요가 없지만 만약에 input 이 그냥 태그가 아니라 CustomInput 이라는 커스텀된 컴포넌트 안에 있다라면은 우리는 해당페이지 초기화면에서 돔엘리먼트를 조작하려면 자식컴포넌트의 input 태그의 inputRef 를 상위컴포넌트에서 다룰수 있어야 한다. const Parent= () =>..
-
next getinitialproperty()react 2021. 12. 15. 11:19
넥스트를 이용해서 초기 화면을 ssr 로 보여주는 경우에 초기페이지는 html과 css 만 가지고 렌더트리를 형성한 후에 보여준다. 근데 내가 만약 데이터를 로드한 이후에 그데이터가 반영된 페이지를 보여주고 싶을때 사용 하는 메서드가 getinitialproperty() 로 렌더트리형성하기 이전에 실행할 코드를 넣어주면 해당코드가 반영된이후에 렌더 하게된다 styled component 의 경우 css-in-js 방식이기 때문에 이전글에서 getinitialproperty() 메서드 안에서 필요한 작용을 해줬었다.
-
Next.js css in js(styled component) (2)react 2021. 12. 8. 17:56
babel-plugin-styled-component 설치 >> .babelrc 파일에 presets : ["next/babel"], plugins: [[ "styled-components",{ ssr : true }]] 설정 _documents 파일에 styledsheet 다 불러와서 렌더트리 생성 이전에 스타일 코드 주입 하는 코드 추가(ex.https://github.com/vercel/next.js/tree/canary/examples/with-styled-components) 이렇게 해주면 이전에 초기페이지 html + css(없음) dptj js 로 만든 css 를 초기페이지에 적용하고 렌더링 한다~