나의 FE피봇이야기/React (26) 썸네일형 리스트형 [props] 전달하기 spread syntax nested component : A compoent inside B component import Avatar from './Avator.js'; function Card ( { children } ) { return ( {children} ); } export default function Profile () { return ( ); } 참조https://react.dev/learn/passing-props-to-a-component [arrow function]3가지 기본 이해 이 영상은 별코딩 영상을 참조하여 작성된 글입니다. 1. 일반함수: 함수 선언식과 함수 표현식 2. 화살표 함수 문법 정리 3. arguments와 가변인자 함수 선언식 - 호이스팅이 가능 - 함수 이름 필수 function main () { return "hi" } 함수 표현식 - 함수를 하나의 표현식 안에서 정의 - 호이스팅 불가능 //(익명 함수) const main = function () { console.log("hello") } const main = ( ) => { console.log("hello") } 화살표 함수 문법 function add ( a, b ) { return a + b } const add = ( a, b) = > { return a+b } //함수가 한줄 일 경우 re.. [useRef]기본 이 글은 별코딩 영상을 참조하여 작성된 들입니다. useRef 변화는 감지 해야하지만 그 변화가 랜더링을 발생시키면 안되는값을 다룰때 set000으로 데이터 값이 변경되면 (component가 있는)페이지가 re-loading되면서 변수값이 초기화 됨. const countRef = useRef(0); return ( Ref : {countRef.current} useRef의 2가지 특징 1 .저장공간 State의 변화 -> 랜더링 -> 컴포넌트 내부 변수들 초기화 Ref의 변화 -> No 랜더링 -> 변수들의 값이 유지됨 2. DOM 요소 접근 일반 변수와 다른 useRef값 왜냐, ref는 전생애 주기를 통해 값 유지 useEffect와 사용시에 좋은 조합 왜냐, ref는 re-rending을 발생시.. [Element&Component] Element 1. 실제로 대부분의 React 앱은 root.render()를 한 번만 호출. 2. React 엘리먼트는 불변객체. - 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없음. - 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줌. => UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것 3. 변경된 부분만 업데이트 React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트(페이지 전체를 re-loading 하지 않음) Component 일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있습.. [useEffect]특징 3가지 이 자료는 별코딩 영상을 참조하여 작성하였습니다. useEffect는 브라우져가 랜더링 이후에 돔에 그림을 그린다. useEffect은 함수 작성 방식에 따라서 함수 실행여부가 달라진다. 1. useEffect (기본) usefEffect (()=>{ // 작성함수 }) 페이지가 랜더링 될때마다 useEffect 함수가 작동 2. useEffect( 특정 useState 언급) useEffect (()=>{ // 작성함수 }, [ value(Dependecy Array) ]) value 값을 작성하면 작성한 value에서만 작동. 즉 [ ] 안에 넣은 useState의 상태가 변경될때만 useEffect function이 작동. 3. useEffect( [ ] No 언급) useEffect (()=>{ .. [useState] CallBack 함수는 2가지 타입을 가지고 있다. 왜 useState를 설명하는데 CallBack 함수를 설명하냐하면, set000은 값이 변경될때마다 페이지를 re-loading 하기때문에 이것을 방지하기 위해서 Callback 함수를 활용. CallBack 함수의 2가지 특징 1. functions를 변수로 사용한다. => accept functions as arguments 2. functions를 돌려 준다. => Return functions => function 즉, 함수 '그대로'를 돌려주기 때문에 () === excute(실행문)이 필요. 참조 https://www.youtube.com/watch?v=gVhRtrOw-oM 2. functions를 돌려 준다. useState 사용 특히 input 함수에서 정보를 작성할 때마다 re-load.. 이전 1 2 다음
