대기업을 향한 디벨롭 블로그

React Context API에 대해 알아보자. Context API는 컴포넌트 구조에서 데이터를 주고받을때는 부모컴포넌트에서 자식컴포넌트에게 Props를 이용하여 데이터를 준다. 하지만 자식의 자식의 자식의 자식에게 데이터를 준다하면 props를 여러번 쓰게 되는 불편함이 있을거다. 이 불편함을 ContextAPI가 데이터를 전역적으로 뿌려줄 수 있다. 먼저 기본적인 공식문서를 올려놓겠다.https://ko.reactjs.org/docs/context.html#when-to-use-context Context – React A JavaScript library for building user interfaces ko.reactjs.org App컴포넌트에서 하위 -> 하위 컴포넌트까지 데이터를 전달해주..

우리가 상세정보같은 페이지를 보기위해 url에 상품정보의 Id같은걸 파라미터로 넘겨 그 값을 이용해 상세정보를 띄어준다. useParams훅을 이용하여 파라미터값을 받아보는걸 해보겠다. 이렇게 Routes를 설정해주고 path에 '/test/:id'를 넣어주었다. url에다가 /test/10 을 요청하면 id에는 10이라는 값이 들어갈 것 이다. 그럼 Test컴포넌트에서 그값을 받아보자. useParams함수를 import해주고 {id}는 path에서 설정했던 이름을 똑같이 적어주어야한다. 그러고 url에 이렇게 입력해주고 Test컴포넌트에서 id값을 그대로 띄어보았다. 이렇게 url파라미터로 id값을 넘겨주면 해당하는 id값의 상세정보같은 걸 띄울 수 있다. 여기서부터는 모든게 응용이다. 나는 방법을 ..

useEffect는 React Hooks중에있는 렌더링에 관한 훅이다. 컴포넌트를 useEffect를 이용하여 처음렌더링될때 , 업데이트될때 , 제거되었을때의 코드를 집어넣을 수 있다. 코드로 알아보자. App.js에 useEffect함수안에 console을 찍어보았다. useEffect함수는 렌더링될때마다 항상실행이된다. 버튼을 누르면 컴포넌트가 렌더링됬다가 안됬다가 하는 코드를 작성해보았다. useState가 바뀌면서 화면이 재렌더링이 될대마다 useEffect도 같이 함수가 실행된다. 이렇게 화면이 렌더링될때 useEffect가 따라다닌다. 여기서 useEffect를 설정해 줄 수 있는데 , 맨 끝에 빈배열을 넣어주면 맨처음 한번실행되고 그다음 렌더링부터는 실행이 안된다. 뒤에 배열안에는 어떤 요소..

일단 bootstrap이란 프레임워크이다. '디자인 도우미'라고 생각해도 무방하다. CSS를 커스텀하지않고 bootstrap을 가져다써도 완성도가 좋다. 트위터에서 만든 프레임워크이며 엄청난 사랑을 받고있다. 리액트에서 bootstrap을 사용하는 법을 알려드리겠다. 먼저 react에서 npm install을 해주어야 한다. 리액트 bootstrap공식 사이트에 들어가보자. https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 들어가서 Get Started를 누르면 시작할 수 있다. 이렇게 다운로드를 받으라고 나와있다. ..