전체 글

리액트로 크롬 익스텐션 만들어 보기 시작 부터 출시까지

최근들어 많은 웹사이트들이 blur 효과와 회원가입 창을 화면 전체에 뛰어서 원하지 않는 가입을 강요 합니다. 여러 서비스가 필요하다면 유저가 가입 하겠지만 어떤 한 정보만 확인 하고 가고 싶은 유저에게는 사요을 많이 불편하게 합니다. 그래서 이번에 공부도 할 겸 크롬 익스텐션을 한번 리액트로 만들어보고 런칭을 해보려고 합니다. 만들고자 하는 기능은 간단 합니다. 유저가 익스탠션을 클릭하면 로딩된 것중에서 filter blur css 효과를 없에주고 화면 전체를 가리는 회원가입 권유 창등을 제거 해 줍니다. 일단 그러기 위해서는 리액트 프로젝트 설정을 해야 합니다. 먼저 create-react-app을 통해서 시작을 해보겠습니다. 타입스크립트 공부도 할 겸 일단 타입스크립트를 베이스로 만들어 보겠습니다...

Redux vs React context api 어떤 경우에 사용 할 까?

Redux는 리액트 에서 많이 사용되는 state 관리 라이브러리 이고 context api는 리액트에서 기본으로 제공하는 state 관리 api 이다. 대부분에 경우 state management 라이브러리인 redux를 사용하는데 왜 그런지 알아보도록 하자. 먼저 Redux와 context api에 특징에 대해서 알아보자 Redux 컴포넌트에 state를 prop으로 넘겨 줄 때 어느 컴포넌트 깊이와 상관 없이 넘겨줄 수 있다. 만약에 컴포넌트 구조가 아래와 같이 되어 있는데 // const child3Reducer = { candies: [] iceCreams: [] } const Child3 = () => { const iceCreams = useSelector(state => state.chil..

리액트 훅(React hook)이란? 예제로 알아보기

이번 글에서는 리액트에서 제공하고 있는 훅에대해서 설명하고 어떻게 사용하는지 예시를 보면서 배워 보겠습니다. 앞에 글에서 리액트 훅이 왜 나오게 되었고 어떻게 사용되는지 간단하게 알아보았습니다. 앞에글을 읽어 보시면 더 이해가 잘 될 것이라 생각됩니다. useState 클래스 형태의 컴포넌트에서 사용하던 state와 setState를 사용할 수 있게 해주는 함수 입니다. useState은 기본 값을 받을 수 있고 현재 state와 state를 업데이트 할 수 있는 함수를 리턴합니다. const [showList, updateShowListState] = useState(false) // false는 기본값 const [todoData, updateTodoData] = useState({ todos: []..

React-hook 이 나온 이유와 사용 해야 하는 이유

React hook이 나오기 전 까지는 리액트 life cycle을 사용하기 위해서 Class를 사용해야 됐었습니다. 리액트를 클래스로 사용하기 위해서는 React.Component를 extend 해야 하고 state을 사용하려면 super(props)도 적어 줘야 합니다. 대부분은 이게 왜 필요한지 모르고 적고 있었습니다 하지만 없으면 안 돌아가니까 계속 적어주는 것이죠. 이런 부분은 자동으로 되면 좋을 것 같은데? 그리고 Class를 사용해서 재사용 가능한 로직을 만들려면 HOC(High-Order-Component)를 사용해서 만들어야 되는데 이걸 사용하다 보면 나중에는 HOC 헬을 격게 되고 코드도 이해하기가 상당히 힘들어집니다. state를 정의하고 업데이트하는데도 많은 코드가 필요했습니다. 이..