React- 쇼핑몰 웹사이트 (2) - Modal, Map, Splice, Unshift

모달 창 UI 만드는 방법

1. html css로 미리 디자인을 완성

2. UI의 현재 상태를 state로 저장

3. state에 따라서 UI가 어떻게 보일지 작성

 

 

! 삼항 연산자

html코드쪽에서는 javascript코드를 작성할 수 없음 

{

 

 

}안에는 if문을 사용하는게 아니라 삼항연산자를 사용해서 조건식을 표현함 

 

Map : 많은 div 들을 반복문으로 줄이고 싶을 때 

1. array의 자료 갯수 만큼 함수안의 코드를 실행해줌

2. 함수의 파라미터는 array안에 있는 자료이다

3. return에 뭐 적으면 array로 담아줌 

 

!  중괄호 안에서는 for반복문을 사용할 수 없고 map()함수를 써야함 

array이름.map(function(a, i){

    return (

     

     )

}

 

자식이 부모의 state를 가져다 쓰고 싶을 때 props 

!  부모->자식 만 가능 ! 

자식->부모 (패륜ㅋㅋ..)

자식 <-> 자식(불륜 )

props를 응용한 상세페이지 만들기 

 

input 1 : 사용자가 입력한 글 다루기 

이벤트 버블링 

: 상위 html로 이벤트가 퍼지는 현상 

: 막고 싶으면 e.stopPropagation()

 

state변경함수는 늦게 처리됨 

 

 

 

 

input 2 : 블로그 글 발행 기능 만들기 

리스트이름.unshift("새로추가할 값")

: 리스트에 "새로추가할 값"이 맨 앞에 추가됨  

 

리스트이름.splice(인덱스1, 인덱스2)

: 인덱스1번째항목부터 인덱스2개만큼 삭제