전체 글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. 알아두면 좋은 사이트 (그라데이션, filter, 색상 조화) 이거는 굳이 블로그에 글을 여러 개 남길 필요 없이 한 번에 다 작성하겠다. 1. 그라데이션을 편안하게 맞출 수 있다. linear, radial 설정까지 가능하고 잘 사용하면 편안하다. https://cssgradient.io/ 2. filter 태그를 사용해서 색상이 변경될때 맞춰야 되는 값을 알려줌. 기준은 #000이고 이 이미지를 #fff 로 변경하고 싶으면 input에 입력하고 compute filters를 눌러보자. https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whateve.. 2023. 4. 11. 이전 1 2 다음