React10 [React] CH10. props을 응용한 상세페이지 만들기 1. UI 만드는 법 UI와 관련된 중요 정보들을 state로 저장해놓고, state에 따라서 UI를 수정 2. 버튼 누를 때마다 각각 다른 모달창 출력 부모의 state 사용을 위해 props 신고해야 함 function App() { let [누른제목, 누른제목변경] = useState(0); return ( { 누른제목변경(0)} }>버튼1 { 누른제목변경(1)} }>버튼2 { 누른제목변경(2)} }>버튼3 { modal변경(!modal) } }> 열고 닫기 { modal === true ? : null } ); } function Modal(props){ return ( {props.글제목[props.누른제목]} 날짜 상세내용 ) } 3. 글제목 누르면 state 변경 index를 하드코딩하지 말.. 2021. 9. 11. [React] CH09. props 1. props 쓰는 이유 같은 함수가 아닌 외부에서 state 이용 시, 에러 발생 ⇒ props가 해결!! 자식컴포넌트는 부모의 컴포넌트를 가져다 쓰고 싶을 때 사용 가능 - App이 가진 state를 쓸 수 있게 전송 2. props로 자식에게 state 전해주는 법 1) { modal === true ? : null } 2) 자식 컴포넌트에서 props 파라미터 입력 후 사용 - props : 부모에게 전달받은 모든 state 담고 있는 큰 변수, object function Modal(props){ return ( {props.글제목[0]} 날짜 상세내용 ) } [ 참고 ] https://online.codingapple.com/course/react-basic/ React 리액트 기초부터 .. 2021. 9. 10. [React] CH08. 리액트 환경에서의 반복: map(), for 1. 리액트 환경에서의 반복 HTML을 반복문으로 반복 가능 리액트 환경에서 for문 이용 BUT, JSX {} 중괄호 내에 for 넣지 못함 ⇒ map 함수 이용!! 2. map 함수 : map() 사용 - array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용 - 유사 반복문 형태 - { 반복할 데이터.map() } - { 반복할 데이터.map(()=>{return})} ⇒ { 반복시킬 데이터 갯수.map(return 반복시킬 HTML} } 함수 안 파라미터 ex) a, 글 - array안에 있던 각각의 데이터 var 어레이 = [2,3,4]; var 뉴어레이 = 어레이.map(function(a){// a가 배열안에 있던 각각의 데이터 return a*2;// [4,6,8] }) let.. 2021. 9. 10. [React] CH07. 클릭하면 동작하는 UI(모달창) 만드는 법 1. JSX 중간에 자바스크립트 코드 넣기 { 자바 스크립트 코드 } 2. HTML UI를 조건에 따라 보여주기 삼항 연산자 - if는 {}안에 쓸 수 없음 → {}안에서 if문 같은 역할이 가능한 것 ⇒ 삼항 연산자 - 조건식 ? 참 일때 실행할 코드 : 거짓일 때 실행할 코드 { 1 < 3 ? : null// 텅빈 HTML } ※ 참고 텅빈 HTML 의미 ⇒ null 자료형 3. React 에서 클릭시 등장하는 UI 만드는 법 리액트에서 UI 보임/안보임 정보 → state로 저장 (true/false 자료셩 사용) if문 이용해 state가 true일 때, UI 보여줌 function App (){ // modal 창 보임/안보임 스위치 // 사이트 첫 로드시 모달창 안보이며, 제목 누르면 모달창 .. 2021. 9. 9. [React] CH06. Component : 많은 div들을 한 단어로 줄이는 방법 1. 리액트의 Component 문법 : HTML을 한 단어로 줄여서 쓸 쑤 있는 방법 Component 정의 - 축약한 HTML 덩어리 - 리액트에서 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법 Component 만드는 법 1) function을 이용하여 함수 만들고 이름짓기 2) 함수안에 축약을 원하는 HTML을 넣기 3) 원하는 곳에서 사용 function App (){ return ( HTML 잔뜩있는 곳 ... ) } function Modal(){ return ( 제목 날짜 상세내용 ) } ※ Component 유의사항 1) 관습적으로 Component의 함수명은 대문자로 시작함 2) return() 안에 div가 나란히 연속적으로 등장할 수 없음 → 쓰고 싶다면 전체를 하나.. 2021. 9. 9. [React] CH05. Array, Object state 데이터 수정 방법 1. Array, Object state 데이터 수정 방법 1.1 변경함수 사용 X ⇒ 권장사항 X # 권장사항 XXXXXX ⇒ state는 직접 건들면 안됨 function 글제목바꾸기(){ 글제목[0] = '여자 추천 코드' } 버튼 ※ 참고 함수()를 바로 넣으면 → 함수아니라 바로 실행되어 결과가 출력됨 따라서, 클릭 시 함수가 실행되게 하려면, 함수를 직접 넣어야 함. EX) 버튼 1.2 변경함수(대체할 데이터) 사용 O ⇒ 권장사항 O 1) 하드 코딩 # 권장사항 OOOO ⇒ 변경함수 이용 function 글제목바꾸기(){ // 하드코딩 변경방법 글제목변경( ['여자 코트 추천', '강남 우동 맛집', '치킨 맛집 추천'] ); } 버튼 2) deep copy 많은 배열을 하드코딩해서 다 쓸.. 2021. 9. 9. 이전 1 2 다음
