지영이의 개발 블로그

상품 데이터 상품데이터 3개가 있는데 이것을 html에 보여주기위해 위의 자료를 state에 보관해 놓고 html에 데이터바인딩 해보도록 하겠다. 위자료를 해석하면 [array 자료]에 상품정보가 {object자료}형식으로 넣어준것 => [ { } , { } , { }] 이런형식으로 구성돼있다. import/export 다른파일에 있던 자료를 가져오려면 import/export 문법을 사용해야 한다. 위의 상품데이터들을 state로 만들고 싶은데 usestate( ) 안에 넣기에는 너무 길다 . 그래서 다른파일에 보관하고 import 해올 수 있다. 예를 들어 data.js라는 파일이 있는데 거기 있던 변수를 App.js에 가져와서 쓰고 싶으면 export default 변수명 ; Card 이렇게 pro..

React-Bootstrap 사용법 버튼이 필요하면 React-Bootstrap 사이트에서 검색해서 예제코드를 복붙하면 버튼 생성 끝입니다. 대신 복사붙여넣기할 때 대문자로 시작하는 컴포넌트이름은 상단에 저렇게 import 해와야합니다. 이미지 넣는법 & public 폴더 이용하기 (1)css파일에서 src안의 이미지 넣을 때 =>css 파일에서 src폴더의 이미지를 넣을땐 ./이미지경로 (2)html에서 src폴더의 이미지 넣을 때 1. import 작명 from './이미지경로' 한 다음에 2. 이미지경로가 필요한 곳에서 작명한걸 사용하면 됩니다. 태그 쓰고싶으면 이렇게 써도 보입니다. Bootstrap으로 레이아웃 짜기 복붙하면 됨 모바일에선 알아서 세로정열도 해줌... public 폴더의 용도 h..

열심히 정리해둔 글이 3번이나 날라갔다...😥 다시 써보즈아~~~~~❕❕❕❕❕❕❕❕❕❕❕ input 태그를 이용해서 사용자가 입력한 글을 다뤄보겠다! {실행할 코드}} > =>이렇게 해주면 된다! onChange는 이벤트 핸들러라고 하는데 에 유저가 입력할 때마다 인풋안에 있는 코드를 실행시켜준다. onMouseOver={ } ( 이 요소에 마우스를 댔을 때 안의 코드를 실행해줌) , onScroll={ }( 이 요소를 스크롤했을 때 안의 코드를 실행해줌.) 등 많은 이벤트가 있으니 구글검색으로 찾아서 씁시당.. 태그에 입력한 값을 가져와보자 { console.log(e.target.value) }}/> =>e는 파라미터를 추가해주고 e.target.value 는 현재 에 입력된 값을 가져올 수 있다. ..

props 사용법 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야합니다. 만약 다른색 모달창이 필요하면 function 을 여러개 만들어서 각각 배경색을 다르게 만들어도 되지만 내용이 똑같은데 배경색만 다르면 굳이 같은 함수를 여러개 만들 필요가 없다. =>props.color 이런 식으로 구멍을 뚫어놓으면 이제 컴포넌트 사용할 때 이러면 하늘색 모달창이 생성됩니다. 이러면 오렌지색 모달창이 생성됩니다. 그래서 비슷한 컴포넌트를 또 만들 필요가 없어지는 것입니다. pops 응용 - 글제목 눌렀을때 같은 글제목의 모달창이 뜨게 하기 동적인 UI만들기 1. html css로 미리 디자인 2. 현재 UI의 상태를 state로 만들어두고 3. state..

map 함수 => 자바스크립트 map 함수 사용법과 정리해놓은게 있으니 확인 https://jssq2468.tistory.com/9?category=1008957 map 함수 map map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. array.map(callbackFunction(currenValue, index, array), thisArg) filter, forEach와 같은 구문이다. callbackFunctio.. jssq2468.tistory.com map 함수는 반복문이 도는거라고 생각하면 됩니다. array내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용합니다. .map()은 유사 반복문입니다. for문을 사용할수 있는데 for문은 J..

Component 반복해서 출현하는 HTML or 긴HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 방법. 1. function을 이용해서 함수를 하나 만들어준다. ( function App(){}내부에 만들면 x) 2. 그함수 return () 에 축약을 원하는 html을 담는다. 3.원하는 곳에서 or 을 사용하면 축약한 html이 나옴! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } cs 컴포넌트는 state를 가져다쓸 때 문제가 생긴다 즉 A함수에 있던 변수는 B함수에서 맘대로 가져다 쓸 수 없음! =>props라는 문법을..

jsx란? JSX란 Javascript를 확장한 문법입니다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다..