본문 바로가기

전체 글

(75)
리액트 map 함수, 반복문, for문 대신 사용 map 함수 사용법 map함수는 보통 array자료를 반복할때 사용된다. 리액트에서는 { } 중괄호 안에 사용하는건 for반복문이 아니라 map반복문을 사용해야 한다. for 문법은 JSX 안에서 사용할 수 없어서 사용시에는 바깥에서 쓰면 된다. [1,2,3].map((a)=>{ console.log(a) }) // a라는걸 array에 반복,순차적으로 넣어준다. // a,a,a [1,2,3].map((a)=>{ return '123' }) // return을 사용하면 123이라는 결과를 [123],[123],[123] 이렇게 넣어준다. // return안에 넣는 값이 길어지면 ( ) 를사용해서 안에 넣어주면 된다. 아래는 예시이다. 글제목이라는 array 자료 길이만큼 반복해주는것. let [ 글제목 ..
include( ),indexOf( ) 함수 string 특정 문자 위치 찾기 함수 include( ) 문법 원하는 내용을 확인할때 사용한다. 내가 원하는 숫자나 문자가 data 안에 들어가냐 안들어가있냐의 차이. 아래 코드처럼 작성하해서 사용하면 된다. let data = [1, 2, 3, 4]; if (data.includes(3)) { console.log("true"); } else { console.log("false"); } 여기서 주의해야할 점은 includes( ) 는 ie 에서는 작동이 안될수도 있다. 그럴때 사용하는것이 indexOf( ) 함수 찾는 문자열이 없으면 -1 을 반환. 찾는 문자열이 있으면 첫번째 글자의 순서를 반환. const string = 'Hello wolrd'; console.log(string.indexOf('wolrd')); // 6 conso..
리액트 동적 ui 만들기 모달창만들기 리액트 동적 ui 만들기 1. html css로 미리 디자인 완성 2. ui 현재 상태를 state로 저장 3. state에 따라 ui가 어떻게 보일지 작성 [조건문] html css로 미리 디자인 완성 function Modal(){ return( 제목 날짜 상세내용 ) } .modal { margin-top: 20px; padding: 20px; background: #eee; text-align: left; } // 컴포넌트 작성 ( html / css 작성 ) ui 현재 상태를 state로 저장 let [modal, setModal] = useState(false); // 현재상태를 state에 보관. // false,true가능 , 숫자가능 state에 따라 ui가 어떻게 보일지 작성 [조건문]..