props3 한입 크기로 잘라먹는 리액트 - 3 Props 컴포넌트에 데이터를 전달하는 방법 부모 컴포넌트에서 자식 컴포넌트에게 속성과 값을 넘겨주는 것 props 를 사용하여 데이터를 전달하면 컴포넌트는 해당 데이터를 활용하여 UI를 동적으로 생성하고 업데이트 할 수 있다. 기본적으로 키=값 형태로 넘겨주게 되는데, 넘겨줄 속성이 많아지면 속성:속성값 형태의 객체로 만들어서 전개 연산자(...)와 함께 사용해준다. const customProps = { 속성: 속성값, 속성2: 속성값2, }; // ... 결과적으로 자식 컴포넌트에서는 위에서 받아준 속성값을 props 객체에 담아서 넘겨주게 된다. 비 구조화 할당을 활용하여 props 객체에 담겨오는 속성값만 접근해줄 수 있다. // children 은 props 객체에서 children 키만 받아.. 2023. 3. 29. KDT 5th 웹개발자 입문 수업 37일차 배열을 state 로 사용하면..? export default function StateProblem() { let [state, setState] = useState([0]); console.log('initial state : ',state); return ( {state} { state[0] = 1; setState(state); console.log('after state : ',state) }} > 1로 만들기 ) } 실제 콘솔창에 0 -> 1로 변화했는데, html 상에선 변경이 안되는 이유 원시 타입의 경우 값을 저장할 때 그 값 자체를 저장하지만, const location1 = 'korea'; const location2 = 'korea'; location1 === location2 //.. 2023. 3. 28. SOAPLE 처음 만난 리액트 Components and Props Components 자바스크립트의 함수와 유사한 로직으로, 입력을 받으면 출력을 리턴한다. (그래서 함수 같다고 생각하면 편하다고 한다) 입력 : Props React Component 출력 : React element component는 class, react element는 instance와 유사하다. Props - Property (입력 속성) React Component의 속성 컴포넌트에 전달할 정보를 담고 있는 자바스크립트 객체 Props 특징 Read only 라서 값을 변경할 수 없다 ---> 새로운 값을 컴포넌트에 전달하여 새로운 element를 생성해준다. pure 한 함수 : 입력값을 변경하지 않고 같은 입력값에 대해 항상 같은 출력값을 리턴할 때 Impure 함수 : 입력값을 변경 모.. 2023. 3. 7. 이전 1 다음
