오늘도 코딩하나

props 전송 없이  state 공유하기!App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면,App → Detail → TabContentprops 전송을 2번 해야함  ⇒ Context API나 Redux같은 외부 라이브러리 사용하면 쉽게 사용가능~! 1. Context API(1) Context API 사용법- App.jsexport let Context1 = React.createContext();function App() { let [inven, setInven] = useState([10,11,12]); return ( )}  - Context1로 원하는 곳을 감싸고 공유를 원하는 state를 value 안..

1. 서버란?- 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램** 서버에 데이터 요청시 정확한 규격  - 어떤 데이터인지(URL형식으로)  - 어떤 방법으로 요청할지(GET / POST)  * 보통 데이터를 가져올 때는 GET, 서버로 보낼 때는 POST   -> 하지만 GET, POST의 단점은 브라우저가 새로고침됨=> AJAX 2. AJAX란?- 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브러우저 기능 ** AJAX로 GET/POST 요청하는 방법  ① XMLHttpRequest라는 옛날 문법 쓰기  ② fetch() 라는 최신 문법 쓰기  ③ axios같은 외부 라이브러리 쓰기 (1) axios- axios 설치npm install ..

1. 컴포넌트  Lifecycle- Detail.jsfunction Detail(props) { let {id} = useParams(); let idx = props.shoes.find((x) => x.id == id); return ( {idx.title} {idx.content} {idx.price}원 주문하기 )}=> D..

1. 리액트 라우터?리액트 라우터 = 라우팅 관련 라이브러리 (페이지 이동)-> 신규 페이지를 불러오지 않는 SPA에서 각각의 url에 따라 선택된 페이지를 렌더링 해주는 라이브러리 ** 리액트는 CSR을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식 CSR, SPA에 대한 자세한 설명은 여기를 참고하자https://coding-hana.tistory.com/15 CSR, SSR, SSG 정리https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 ..

https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 - 문서 내에서 또 다른 문서를 담을 수 있는 태그                                    - 부분적 update 가능 1998년 - XMLHttpRequest API(fetch API의 원조)             - HTML 문서 전체가 아니라 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있음.             - Data는 JS를 이용해서 동적으로 HTML 요소 생성 => 2005년 ..

1. 데이터 가져오기- data.jslet data = [ { id : 0, title : "나이키", content : "우먼스 나이키 인터랙트 런", img : "./img/shoes1.png", price : 99000 }, { id : 1, title : "아디다스", content : "그라다스", img : "./img/shoes2.png", price : 79000 }, { id : 2, title : "반스", content : "올드 스쿨 - 블랙/블랙 (CANVAS)", img : "./img/shoes3.png", pr..

1. image 삽입 방법(1) img 태그 사용하는 경우import bg from ./img/bg.png' (2) div 태그 사용하는 경우import bg from ./img/bg.png' (3) css 파일 사용하는 경우- App.js - App.css.img-bg { background-image: url('./img/bg.png');}

1. react-bootstraphttps://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React BootstrapLearn how to include React Bootstrap in your project.react-bootstrap.netlify.app(1) react-bootstrap 설치npm install react-bootstrap bootstrap (2-1) index.html - 안에 import 시켜주기 (2-2) App.js import 'bootstrap/dist/css/bootstrap.min.css';-> 2-1 / 2-2 중에 하나의 방법으로 하면 된다. ** bootstrap v..