분류 전체보기6 react 기초 (useEffect) 기본형태 useEffect(function, deps) function 실행하고자 하는 함수 deps: 배열 형태, function을 실행시킬 조건, deps에 특정값을 넣게 되면 컴포넌트가 mount 될때, 지정한 값이 업데이트될 때 useEffect를 실행합니다. useEffect는 두 개의 argument(전달인자)를 가지는 function(함수)이다. 1. 선언 방법 첫번째 인자는 함수, 두번째 인자는 배열(array)이 들어간다. useEffect(() => { console.log("한번만 실행되는 useEffect"); }, []); useEffect가 필요한 이유부터 간단하게 설명하자면 컴포넌트를 리렌더링할때 보면 안에 있는 console.log()또한 매번 찍히는 것을 확인 할 수 있다... 2023. 7. 24. React 기초 (props) 우선 이전과 마찬가지로 https://nomadcoders.co/react-for-beginners 노마드코더 강의를 통해서 공부하고 정리하고 기록한 글이다. 기록했던 내용이 한번 날아가서 다시 작성하는 건 조금 슬프군요 ㅠ props 란? - props는 properties의 줄임말로 속성이라는 뜻이다. // 뭐 사용할 때에 따라 (값, 속성)이라고도 하지만 중요한 것은 -상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름) // 이거에 대해 조금 더 이야기하자면 상위 컴포넌트는 하위 컴포넌트에 props 전달, 하위는 상위에 이벤트 발생 역할을 한다. -프로퍼티는 수정할 수 없다는 특징이 있다 (자식입장에서는 읽지 전용인 데이터이다.) 사용하는 이유? 만약 우리가 컴포넌트 .. 2023. 7. 22. FLEX를 이용한 반응형 줄변경 list페이지 디자이너 분이 오늘 갑자기 flex로 작업하는거에 궁금한 부분을 물어봤는데 설명하려고 간단한 예시를 만들었고, 블로그에 기록해두면 괜찮을것같아서 글을 남기게 되었다. 요청사항은 이러했다. 1. 반응형으로 작업을 한다. 2. ul li에는 이미지, 타이틀, 날짜 가 들어간다. 3. 타이틀은 들어가는 줄이 각기 다르고 li는 가장 긴것 기준으로 높이가 통일된다. 4. 날짜는 li영역 하단에 위치하게된다. 우선 설명으로 보여준 코딩은 이러했다. See the Pen Untitled by 권준희 (@kjhto46) on CodePen. 설명을 하자면 1. ul에 flex를 적용해 'align-items:stretch'를 통해 가장 긴것 기준으로 늘렸다. 2. li로 바로 작업이된다면 height가 자동으로 st.. 2023. 7. 21. React 기초 (JSX, state) 이 글은 https://nomadcoders.co/react-for-beginners 노마드코더 강의를 통해서 공부하고 정리하고 기록한 글이다. JSX에 대해서 JSX는 Javascript를 확장한 문법이다. 이는 createElement를 대체하기 위해서 인데 이유는 개발자들이 조금 더 편리하기 위해서 const Button = React.createElement( "button", { onClick: () => console.log("클릭됐어요"), }, "click me" ); 이런 식으로 있는 CreateElement를 HTML에서 사용하는 문법과 흡사한 문법을 사용해서 개발자들 입장에서는 굉장히 편하다. const Button = ( console.log("클릭됐어요")}> click me );.. 2023. 7. 20. 이전 1 2 다음