개발 학습/프론트엔드14 S2: Event.stopPropagation() 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다. 클릭시 발생하는 이벤트에 작동할 버블들을 막는다고 보면 된다. 해당 노란부분은 ModalView의 컴포넌트 구역으로 클릭하여도 어떤 연속적인 버블작동들이 되지않도록 막는다. 2021. 10. 15. S2: React setState([...전개연산자])로 리렌더링 useState 함수로 값을 주었지만 렌더링이 되지않고 컴포넌트로 전달한 state props가 변화가 없다? ...이렇게 점 세게를 찍는 문법을 spread operator라고 부른다. [...array] 이렇게 사용하면 array를 해체한 후 배열에 넣는다. 결국엔 array원소가 들어가있는 새 배열이 리턴되는 것이다. 핵심은 새로운 주소값을 할당해 주는 것이다. 전개연산자를 사용하지 않고 carItems로 state를 변경할때 cartItems와 동일한 주소를 참조하기 때문에 렌더링이 되지않으며 useEffect로 테스트 해보아도 반응이없다. 새로운 주소를 참조하기 위해 전개연산자로 값을 넣어주면 렌더링이 다시 된다. 2021. 10. 15. S2: React styled-components # const로 css를 적용할 컴포넌트 이름을 선언한다 # styled.태그명으로 태그를 지정한다 # `~` 백틱으로 내부에 css를 적용한다. Styled Component 는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수도 있습니다. 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다. 컴포넌트에 props 로 스타일 속성이 전달된다면 해당 컴포넌트는 props 로 전달된 속성을 우선 적용하며, 전달되는 속성이 없다면 기본으로 설정된 속성을 적용합니다. 이는 Styled Component 가 개발자에 의해 설정된 속성과 기본 속성을 구분할 .. 2021. 10. 14. S2: useEffect * condition에 변화가 있을시 내부 로직이 작동된다. * useEffect의 첫번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다. 이 함수는 다음과 같은 조건에서 실행됩니다. * 렌더링 시기 컴포넌트 생성 후 처음 화면에 렌더링(표시) 컴포넌트에 새로운 props가 전달되며 렌더링 컴포넌트에 상태(state)가 바뀌며 렌더링 * 2번째 인자로 배열이 들어가는데 2021. 10. 7. S1: Props *Props를 통해 자식 컴포넌트는 부모의 자식 value로도 받을 수 있다. * React state는 상태 변경 함수 호출로 변경해야 한다. 강제로 변경을 시도하면 안 된다. 2021. 9. 23. S1: useState와 Props로 자식onClick<=>부모상태 제어하기 Sidebar 컴포넌트 내부에 버튼1과 2가 있으며 해당 버튼을 누르면 Sidebar는 그대로 출력된 상태에서 다른 컴포넌트 2개가 연결된 버튼으로 나타나게 하려고한다. 1. 자식 컴포넌트인 Sidebar에서 버튼마다 oncClick 이벤트를 달아 버튼울 누를시 props의 한 객체 요소로써 test에 값을 담아 props로 보낸다. 2. 부모 컴포넌트인 App에서 Sidebar컴포넌트를 나타내고 태그안에서 test를 받아와 부모의 상태값과 상태값을 변화시킬 함수를 담은 useState에의 상태값을 변화시키는 함수에 연결시킨다. * 자식은 자신의 버튼을 클릭하여 부모의 상태(state)를 바꿀수 있게 됐다. * 자식은 자기상태가 필요없다! 자식이 뭘 클릭했는지에 따라 부모가 뭘 보여줄지 결정하니 부모가 .. 2021. 9. 14. 이전 1 2 3 다음
