프론트엔드 기록

SPA의 단점: 컴포넌트간 state 공유가 어렵다. App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면 어떻게 코드짜야하죠? App -> Detail -> TabContent 이렇게 props를 2번 전송해주면 됩니다. props 전송은 부모 -> 자식만 가능 이게 귀찮으면 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 되는데 오늘은 전자를 알아봅시다. Context API 문법으로 props 없이 state 공유하기 리액트 기본 문법임. props 전송없이 state 공유 가능. 재고라는 state를 App 컴포넌트에 만들어봅시다. 이걸 TabContent라는 자식컴포넌트에서 쓰고싶다고 가정해봅시다. Context API 문법을 쓰면 props 전송..

리액트 2023. 9. 12. 01:19

컴포넌트 등장, 퇴장 애니메이션같은게 필요하면 라이브러리설치해서 써도 되겠지만 CSS 잘하면 간단한건 알아서 개발가능합니다. 옛날에 배웠던 useEffect 이런거 활용하면 되는데 CSS 애니메이션 처음인 분들을 위해 오늘도 정확한 개발스텝을 알려드립니다. 전환애니메이션은 부착하면 애니메이션이 나오는 className 하나 만들고 원할 때 부착하면 됩니다. 애니메이션 만들고 싶으면 1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가 4. 원할 때 2번 className 탈부착 이게 끝입니다. CSS 잘쓰면 모든 애니메이션 알아서 만들 수 있습니다. 저번에 만들었던 탭의 내용이 서서히 등장하는..

리액트 2023. 9. 12. 00:32

오늘은 쇼핑몰에서 흔히 볼 수 있는 탭 UI를 만들어봅시다. 버튼 3개와 박스 3개를 미리 만들어놓고 버튼 누를 때 마다 그에 맞는 박스 보여주는게 탭 UI입니다. 동적인 UI 만드는 법 다 알려드렸는데 그거 가지고 혼자 코드짜보는게 실력향상에 많은 도움이 될듯 합니다. 1. html css로 디자인 미리 완성해놓고 -> 탭의 내용과 버튼 디자인하기 2. UI의 현재 상태를 저장할 state 하나 만들고 3. state에 따라서 UI가 어떻게 보일지 작성하면 된다고 했습니다. 1. html css로 탭 디자인 미리 완성하기 버튼3개와 3개가 필요합니다. 디자인하기 귀찮아서 버튼은 react-bootstrap 사이트에서 복사해서 Detail 페이지에 넣어봤습니다. 버튼0 버튼1 버튼2 내용0 내용1 내용2..

리액트 2023. 9. 11. 16:00

POST요청 하는 법 axios.post('URL', {name : 'kim'}) 이거 실행하면 서버로 { name : 'kim' } 자료가 전송됩니다. 완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 됩니다. 동시에 AJAX 요청 여러개 날리려면 Promise.all( [axios.get('URL1'), axios.get('URL2')] ) 이러면 URL1, URL2로 GET요청을 동시에 해줍니다. 둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 됩니다. 원래 서버와 문자자료만 주고받을 수 있음 object/array 이런거 못주고받습니다. 근데 방금만해도 array 자료 받아온 것 같은데 그건 어떻게 한거냐면 object/array 자료에 따옴표를 쳐놓..

리액트 2023. 8. 31. 10:23

서버란? 서버: 부탁하면 진짜로 들어주는 프로그램 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다. 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램 입니다. 그래서 서버개발 별거아님 "누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝입니다. 유저가 그냥 데이터달라고 떼쓰면 서버가 보내주진 않습니다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데 1. 어떤 데이터인지 (URL 형식으로) - 서버만든 사람에게 물어보면 됩니다!! 2. 어떤 방법으로 요청할지 (GET or POST) 잘 기재해야 데이터를 보내줍니다. 데이터를 가져올 때는 보통 GET 고르면 되고 (..

리액트 2023. 8. 31. 10:18

useEffect에 넣을 수 있는 실행조건 [] useEffect 실행조건 넣을 수 있는 곳 !!! useEffect(()=>{ 실행할코드 }, [count]) useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데 거기에 변수나 state같은 것들을 넣을 수 있습니다. 그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행해줍니다. 그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행되겠군요. (참고) [ ] 안에 state 여러개 넣을 수 있음 useEffect(()=>{ 실행할코드 }, []) 아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않습니다.(mount, update 시에만 ..

리액트 2023. 8. 31. 09:24

오늘은 Lifecycle 어쩌구랑 useEffect라는 함수에 대해 알아봅시다. 어딜 들쳐봐도 다들 어렵게 가르치는 Lifecycle 이라는 개념이 있는데 실은 별거아닙니다. 이걸 배우는 이유는 componentDidMount() 이런 유용한 Lifecycle 함수들을 쓰기 위해서 배우는겁니다. 요즘 사람들은 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용하기 때문에 우리도 그걸 배워봅시다. 컴포넌트의 인생 여러분이 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다. 컴포넌트도 인생이 있다는겁니다. 생명 주기가 있다. 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) - 컴포넌트가 처음 보이는 것 2. 재렌더링이 될 수도 있고 (전문용어로 update) -..

리액트 2023. 8. 31. 03:21

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데 1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나 이런 경우가 있습니다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데 styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다. 일단 설치부터 해봅시다 터미널 열어서 npm install styled-components 해주면 됩니다. import styled from 'styled-components' 그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다. Detail.js 파일 위에 ▲ 위처럼 입력해서 import ..

리액트 2023. 8. 30. 21:27