Props

React : 탭 만들기 (if else, array로 만들기) + props 귀찮을 때 팁

풀이 function Detail(props){ let [tab, setTab] = useState(0); return ( {setTab(0)}}>버튼0 {setTab(1)}}>버튼1 {setTab(2)}}>버튼2 ) } function TabContent(props){ if (props.tab === 0) { return 내용0 } else if (props.tab === 1) { return 내용1 } else if (props.tab === 2) { return 내용2 } } 더 센스있게 풀기 function TabContent({tab}){ return [내용0, 내용1, 내용2][tab] } 알게 된 점 JSX는 JavaScript의 확장 문법이지만, switch 문은 JavaScript의 제어..

React : 더보기 버튼 누르면 ajax axios로 상품 더 가져오기

조건 더보기 버튼을 누르면 ajax axios로 링크의 상품 데이터(json형태)를 불러온다. 풀이 처음에는 click state를 만들어서 true/false 스위치로 true 시 나올 상품.../false 시 나올 상품.. 하고 삼항연산자로 넣었는데, 그럴 필요가 전혀 없었다. function App() { let [shoes, setShoes] = useState(data); return ( ); } function Main(props){ let moreProduct = function(){ axios.get('https://codingapple1.github.io/shop/data2.json') .then((response)=>{ let newProduct = response.data; let c..

React : styled-components (설치 , 사용, 장단점), css파일 js에 종속시키기

styled-components 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다. 설치 터미널에 아래 코드를 입력한다. npm install styled-components * 현재 version6 이후 해당 명령어 입력 시 문제가 발생하고 있어서, npm install styled-components@5.3.10로 입력했다. 그리고 사용하고 싶은 컴포넌트 맨 위에 import해온다. import styled from 'styled-components' 사용 import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey; `; let YellowBtn = styled.button` backgrou..

React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)

조건 클릭한 글의 제목이 모달에 뜨게 만들기 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [modal, setModal] = useState(false); let [titleindex, setTitleindex] = useState(0); return ( { title.map(function(a,i){ return ( { title[i] } { modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨 2월 18일 발행 ); }) } {modal && } ); } f..

React : props (state,변수,함수,텍스트 등 전송)

변수는 function scope를 가지므로 React에서도 다른 function 내에 있는 변수를 가져다 쓸 수 없다. function App (){ let [btn, setBtn] = useState(['바로가기', '더보기', '다운로드']); return ( ) } function Button(){ return ( { btn }