본문 바로가기

Front-end7

[React] useEffect 란? useEffect 란 ? useEffect 란? useEffect(callback, [dependencies]) Effect 란? useEffect 는 왜 useEffect 라고 불리는걸까? effect 란 무엇일까? effect는 함수형 프로그래밍 용어인 "side effect" 를 의미한다. side effect 가 뭔지 이해하기 위해 먼저 pure function 에 대해 이해 해 보자 대부분의 react component는 pure function 이 되려고 한다. react component 를 함수라고 생각하는게 이상하겠지만 react component 는 함수다! 대부분의 react component는 pure function 이며 input을 받고 예측 가능한 JSX output을 만들어낸.. 2022. 11. 3.
[React] Props 로 콜백 함수 전달하기 / 어떨때 Props로 콜백 함수를 전달해야 하는가? Props 로 콜백 함수 전달하기 개념 정리 Props 란 ? react에서 props는 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달 할 때 사용된다. (부모 -> 자식 ) CallBack Function 이란? 정의: 프로그래밍에서 콜백 또는 콜백함수는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. 이벤트는 페이지가 로드되거나 유저가 click, hover, change 등의 상호작용을 했을 때 등 그 밖의 여러가지 상황에서 발생한다. 이벤트에 반응하기 위해서 함수를 공급해야한다. 이벤트가 발생했을 때 불려 질 함수를 콜백함수라고 한다. React Data Flow data는 부모에서.. 2022. 10. 29.
[CSS] display: flex 요소 수평,수직 정렬 하는법 justify-content: center ,align-items : center , 높이가 다른 요소 수직 정렬 하기 안녕하세요 질서정연 입니다. 오늘은 CSS 의 display: flex 와 align-items 에 대해 알아보겠습니다. div 안에다가 여러 요소를 넣고 수직 정렬, 수평 정렬 하고 싶으실 때 어떻게 하시나요? 저는 어떤 원리 인지도 잘 모르면서 매번 display: flex 해 주고 justify-content: center, align-items: center 를 써 줬었어요 justify-content를 했을 때 , align-items를 했을때 어떻게 정렬이 되는지 이번 기회에 제대로 알아보자구요 ~ 😎 CSS Flexible Box Layout 은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS모듈입니다. 플렉스 레이아웃 모델에서는 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 .. 2022. 4. 5.