23.03.03(state, map, props부모/자식, 전개연산자)

😀😀

 

 {/*         
state 변경함수의 동작 원리         
- 기존state === 신규 state(글제목 === copy) 를 먼저 검사         
- 그래서 같으면(true), state 변경을 해 주지 않음  
       --> virtual DOM은 바뀐 부분만 변경하기 때문에 (state쓰면 기존값을 남겨두면서 새로운 값으로 변경 가능)     

- [...] => 전개연산자: 괄호를 벗겨서 주소값이 아닌 데이터 값을 넣어줌 -> 주소값이 바뀜     
*/}

 

😀컴포넌트 호출 방법:  <함수이름 />

 

😀컴포넌트 함수 작성(함수이름의 첫글자는 대문자!)

function 함수이름() {       

      return (

      )

}

// 어떤걸 컴포넌트로 만들면 좋은가?
// 1. 반복적인 html이 있을 때
// 2. 큰 페이지를 작성 시
// 3. 자주 변경되는 것들에

/*  부모 컴포넌트에서 자식 컴포넌트로 state를 전송하는 방법 
1. 부모 컴포넌트에 보면 자식 컴포넌트를 작성 한 곳에 가서      <자식컴포넌트이름 작명={state이름} /> 
2. 자식 컴포넌트로 가서 컴포넌트명의 ()괄호 안에 props라는 파라미터를 등록 후 사용   
     호출방법 : props.작명*/

 

function App() {
let [modal, setModal] = useState(false);

return(
   <button onClick={() => {         
   let copy = [...글제목];         
    copy[0] = "여자 코트 추천";         
    b1(copy);     
   }}>수정버튼</button>
  );
}

 {/* 동적인 UI창 */}
{modal === true ? <Modal 글제목={글제목} title={title}/ > : null}}

function Modal(props) { 
     return(   
         <div className="modal">     
            <h4>{props.글제목[props.title]}</h4>     
           <p>날짜</p>     
           <p>상세내용</p>   
         </div> 
)}

 

e --> 배열에 있는거 하나씩 가져오는 역할

 

 

 

😀function(e, i)는 두 개의 파라미터를 받는 함수를 의미합니다.
일반적으로 이러한 함수는 배열의 map() 메서드에서 사용되어, 각 요소와 인덱스를 파라미터로 받아 새로운 배열을 반환합니다.
e는 각 요소를 나타내며, i는 해당 요소의 인덱스를 나타냅니다.

글제목.map(function(e, i) {}

//   map() 반복함수 안에 있는

          //   첫번째 파라미터는 배열 안에 있는 데이터를 의미

          //   두번째 파라미터는 0부터 1씩 증가하는 정수