본문 바로가기

React49

리액트에서의 HTTP 요청 리액트에서의 HTTP 요청 리액트에서 GET이나 POST 같은 HTTP 요청을 해서 데이터를 전송하거나, 어떤 데이터베이스에서 데이터를 받으려면 주의사항이 있다. 단순히 데이터베이스와 연결하면 되지라고 생각하면 심각한 보안문제를 겪을 수 있다. 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저뿐만 아니라 웹사이트의 사용자들도 접근하고 읽을 수 있기 때문에 리액트앱과 데이터베이스 간의 직접적인 연결은 해서는 안된다. 좀 더 자세히 말하면, SQL DB든 몽고DB같은 NoSQL이든 데이터베이스를 데이터베이스 서버에서 실행하는 것은 문제가 되지 않지만, 매우 불안정하거나 잘못 작성된 어플리케이션이 아니고서야 앱으로 직접 데이터를 가져오거나 저장하고 연결을 맺는 행위는 외부 환경에서는 절대 해서는 안되는 .. 2023. 6. 1.
useCallback, state 스케쥴링, 클래스형 컴포넌트 useCallback() 훅에 대해서 useCallback 훅은 함수를 저장하는 기능을 한다. 즉, 이전에 계산된 값을 저장하여 동일한 인자로 함수를 호출할 때 불필요한 계산을 줄이는 최적화 기법인 것이다. useCallback 훅을 사용하기 위해 라이브러리에서 불러오고, 위 코드처럼 저장하고자 하는 함수에 훅을 적용하면 된다. 위 코드는 훅에 하나의 인자만 사용했지만, 두 번째 인자를 사용할 수 있다. 두 번째 인자는 의존성 배열을 전달할 수 있는데, 이 경우 배열에 포함된 값이 변경될 때만 저장된 함수가 재생성된다. 값이 변경되지 않으면 이전 함수를 재사용하는 것이다. 만약 배열이 비어있다면 저장된 함수는 컴포넌트의 생명주기동안 딱 한번 생성된다. 이 useCallback 훅은 부모 컴포넌트에서 함수.. 2023. 5. 26.
리액트의 작동원리, 자식 컴포넌트 재평가, react.memo() 리액트의 작동원리 우선 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다. 이 리액트의 핵심은 컴포넌트인데, 개발자는 사용자 인터페이스의 구축을 위해 컴포넌트를 사용하고, 리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트 역시 컴포넌트를 통해서 하게 된다. 여기서 리액트 DOM에 대해 알아야하는데, 이는 웹에 대한 인터페이스이다. 그건 곧 리액트는 웹을 모른다는 것이다. 브라우저와 전혀 관계가 없는 것이다. 이 리액트는 컴포넌트를 어떻게 다룰지는 알지만 이런 컴포넌트에 HTML 요소들이 있는지, 다른 허구적인 요소들이 있는지 상관하지 않는다. 이는 HTML 요소들을 실제로 화면에 표시해주는 리액트 DOM이 상관하게 된다. 리액트는 컴포넌트를 관리하고 상태.. 2023. 5. 25.
음식주문앱 만들면서 복습하기(3) 음식주문앱의 완성 오늘은 수업과 함께 진행했던 음식주문앱 제작을 완료한 날이다. 물론 백엔드부분은 없어서 50% 완료에 해당하지만 리액트로 처음 웹페이지다운 페이지를 완성하게 되었다. 오늘 만든 부분은 많은 로직을 만들어야해서 많이 어려웠다. 배웠던 것들을 다시 적용했기 때문에 복습은 됐으나, 내가 다시 별도의 연습을 해봐야겠다는 생각이 들었다. 오늘은 카트에 컨텍스트 API를 이용하는 것부터 시작했다. 우선, 컨텍스트를 만들기 위해 CartContext 컴포넌트를 새로 만들어서 리액트 라이브러리의 createContext 메서드를 사용해서 생성해주었다. 메서드 안에는 컨텍스트에서 사용할 state를 객체로 저장해주었는데, 4개의 state를 만들고 모두 기본값을 설정해주었으며, addItem과 remo.. 2023. 5. 24.
음식주문앱 만들면서 복습하기(2) 순조롭다가 갑자기 들이닥치는 난관, 극복 원래 계획은 계속해서 진도를 나가기 위해 진행중인 음식주문앱을 오늘 모두 마치려고 했다. 그런데 오늘 수업을 진행하던 도중, 강사님이 다음 단계 진행 전에 모달창을 완성하고 띄워보는 기능을 스스로 해보라고 하셔서 금방되겠지하고 시작했는데, 어느새 밤 10시가 넘어있는 상태가 되었다. 모달창을 완성하는 것은 금방 해결하였으나, 띄우는 기능에 많은 애를 먹었다. 우선, 모달창의 내용인 카트의 구조부터 만들었다. 동적인 기능을 넣기 전에 확인용으로 객체에 한 개의 메뉴를 담아서 이를 맵핑해 주고, 리스트에 이 객체 중의 메뉴이름이 나타나도록 해서 CartItems라는 상수에 넣어주었다. 이 상수는 반환문에서 사용했으며, 그 아래로 메뉴의 총합계와 주문버튼 및 취소버튼이.. 2023. 5. 22.
음식주문앱 만들면서 복습하기(1) 음식주문 앱 만들기 오늘은 지금까지 배운 내용을 복습하는 차원에서 음식주문 앱을 만들어보았다. 수업을 진행하며 내가 직접 이해를 해가면서 만들었기에 아직 일부밖에 못만들었지만, 월요일까지는 만들 수 있을 것 같다. 위 웹페이지는 헤더와 메인섹션으로 구성되어 있는데, 사용자가 메뉴에서 주문할만큼 골라서 카트에 담으면 헤더섹션의 Your cart 버튼 내의 숫자도 그만큼 올라가도록 만들 예정이다. 헤더섹션에서는 로고와 버튼이 상단에 있고, 그 아래 이미지를 넣었다. 이번 프로젝트에서는 모든 css 스타일링을 css 모듈을 사용하여 적용했다. 헤더섹션 내의 Your cart 문구가 있는 버튼은 별도의 컴포넌트로 만들어 로고 아래에 배치해주었다. 버튼 컴포넌트에서는 세 개의 span 태그를 사용해서 표시할 사항.. 2023. 5. 20.

티스토리툴바