분류 전체보기93 [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. [React] CH04. 이벤트 다루기 & state 변경하는 법 ※ 참고 터미널에 뜬 warning ⇒ eslint가 잡아주는 문법 체크사항 eslint ⇒ 잘못된 코딩 관습을 잡아주는 라이브러리 /*eslint-disable*/ ⇒ warning 제거 1. 이벤트 다루는 법 onClick 이벤트 옛날 자바 스크립트 리액트 onClick="클릭될 때 실행할 JS" onClick={ 클릭될 때 실행할 함수 } onClick={ ()=>{ 실행할 내용 } } ※ ES6 신버전 문법 addEventListener('click', function(){}) = addEventListener('click', ()=>{}) 2. state 변경하는 법 state 변경 함수 이용 - state 변경함수로 변경 → 자동 재랜더링 { 따봉변경(따봉+1) }}>👍 [ 참고 ] https.. 2021. 9. 9. [React] CH03. state에 중요한 데이터 저장 1. state 개념 정의 - 변수 대신 쓰는 데이터 저장 공간 데이터 저장하는 방법 1) 변수에 저장 2) state에 저장 2. state에 데이터 저장하는 방법 1) { useState } 상단에 첨부(import) import { useState } from 'react'; 2) useState(데이터) 이용하여 만듦 [state 데이터, state 데이터 변경 함수] ⇒ 2개의 데이터가 담긴 배열 생성됨 useState('남자 코트 추천') = [a, b] - a : '남자코드 추천' b : 남자 코드 추천 state 정정해주는 함수 let [글제목, 글제목변경] = useState('남자 코트 추천'); 3) useState(데이터) 사용 - 문자, 숫자, array, object 다 저장 가.. 2021. 9. 9. [React] CH02. JSX 이용하여 HTML 페이지 제작 App.js : 메인페이지에 들어갈 HTML 짜는 곳 App.css : 메인페이지 CSS 짜는 곳 JSX : 자바스크립트 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 리액트 기본 내장 문법 1. 태그에 class 지정 2. 리액트가 HTML코딩보다 편리한 이유 데이터 바인딩이 쉽다 ex) React, Angualr, Vue 전통적 자바스크립트 데이터 바인딩 리액트 데이터 바인딩 document.getElementById().innerHTML = ''; # 리액드 데이터 바인딩 ⇒ {변수명, 함수 등} // src, id, href등 속성에서의 데이터 바인딩 개발 Blog // 변수명 데이터 바인딩 {posts} // 함수 데이터 바인딩 {함수()} 데이터 바인딩 : 동적인 데이터를 처리 : .. 2021. 9. 9. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음