개발하는 너구리

문제점 드롭박스 관련 작업을 하다가 기존 로 만들어진 드롭박스는 내가 원하는 css 스타일링을 하는데 한계가 있어 드롭박스를 직접 만들었다. 완성 후, 한가지 문제점을 발견! 드롭박스 리스트 중 하나를 선택하지 않으면 드롭박스 창이 계속 켜진 상태로 유지되어있다는것! 내가 원하는건, 굳이 리스트 중 하나를 선택하지 않아도 다른 부분 클릭시 드롭박스 창이 사라지게 만드는것이다. 시도해본것 && 해결 일단 머리속에 떠오른건 useRef()훅, 이걸로 좌표를 찍어주고 현재 내가 클릭하고 있는 곳과, useRef로 찍어놓은 좌표의 위치가 다르면 드롭박스를 사라지게 만들면 되겠다는 생각으로 코딩을 해보았다. const dropLeftRef = useRef(null); const dropRightRef = useR..

리덕스 (Redux) 문제점 컴포넌트에서 컴포넌트로 State를 보내기 위해서는 반드시 부-모 관계여야한다. 이로 인해서 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 중간 부모컴포넌트를 거쳐야만 한다는것! 정작 부모컴포넌트에서는 그 값이 필요가 없어도 말이다.. props로 일일이 전달해주는게 번거롭다 생각했던 차에 리덕스라는 도구를 알았고, 익히기 시작했다 시도한점 && 해결 리덕스를 익히면서 Global state(전역상태)의 개념을 익혔다. 그동안 컴포넌트에서 useState를 이용해서 생성한 Local state(지역상태)의 개념만 머리속에 있었는데, state를 중앙에서 모두 접근가능하게끔 만들어주는 리덕스를 사용하니, 불필요한 props전달을 안해도되었다 즉, 중앙 stat..

지금 진행 중인 점프잇 클론프로젝트 진행 중 내가 맡은 파트는 '직무탐색'페이지다. 채용사이트를 클론하는 프로젝트이니만큼 카테고리 필터기능이 핵심이라고 생각해서 냉큼 이 파트를 담당한다고 하고... 코딩을 하면서 생각보다 힘들다라는 생각은 들지만 하나하나 코드를 완성해가며 느끼는 성취감은 정말 대단하다 오늘도 카테고리 버튼 활성화 시 해당 카테고리에 포함된 기술스택이 활성화되고, 반대로 카테고리 버튼 비활성 시 기술스택도 비활성되는 로직을 완성하냐고 16시간 가까이 걸렸다...흑... 16시간 대장정의 마침표를 찍고자 블로그를 작성한다 리액트 버튼 클릭 시 버튼 색상 변경 (활성화) 0 ? '' : ' active'} onClick={handleTechOff} > 전체 {cateData.map((item..

제어 컴포넌트 - 의 value값을 리액트에서 지정 ex) - 리액트에서 사용하는 값과, 실제 인풋 값이 일치 htmlFor - 에서 사용하는 속성 for는 JS의 반복문 키워드 for와 겹치므로, 리택트에서 htmlFor 라는 키워드로 사용 onChange, value, 이벤트함수 등록 - 이벤트에 등록하는 함수에는 이벤트객체 e를 파라미터로 받아와서 사용가능 - e.target은 이벤트가 발생한 요소를 가리킴 - e.target.value를 조회하면 현재 에 입력된 값을 알수 있음( 즉, 사용자가 인풋한 값을 알수있음) ex) const handleTitleChange = (e) => { setTitle(e.target.value); }; //이벤트 등록 함수 const [title, setTitle..

Children prop : 기본적으로 존재하는 prop 여는태그,닫는태그 형태로 작성 --> 그 안에 작성된 코드가 children prop값에 담긴다 SCSS - 변수선언 : $변수명: 속성값; 변수 사용 : $변수명 - @import "파일명"; 으로 SCSS파일 연결해 $변수명으로 변수 사용 리액트에서 를 다루는 기본 방법 state를 만들고 target.value 값을 사용해서 값 변경 이때, value prop으로 state값 내려주고, onChange prop으로 핸들러 함수 넘겨줌 + 폼 값을 객체 하나로 처리하기 - 이벤트 객체의 target.name과 target.value 값을 이용해, 값을 변경 -> 객체형 state 하나만으로도 값 처리 가능 ex) const { name, val..

리액트에서 렌더링되지 않는 값 : null, undefined, true, false, ''(빈문자열), [](빈배열) 사용예시) { hasNext && 더보기 } hasNext가 true값이면, 논리연산자&& 뒤 button태그 반환 -> JSX표현식 -> 렌더링 hasNext가 false값이면, 논리연산자&& 앞 hasNext 스테이트 반환 -> false는 렌더링되지 않는 값 -> 렌더링X setter 함수에서 콜백함수 사용 : 비동기 상황에서 state 변경 할때 이전 state값을 사용하려면 setter함수에 콜백함수를 사용 즉, 콜백함수를 매개변수처럼 활용 ex) setItems( (prevItems) => [...prevItems, ...reviews] ) - prevItems = 이전 st..

props - properties의 약자, 우리가 어떤값을 컴포넌트에 전달할 때 사용 - 상위 컴포넌트 -> 하위 컴포넌트 (단방향 흐름) children prop - 모든 컴포넌트의 props 객체는 children이라는 이름의 property를 가진다 - props.children은 컴포넌트의 여는 태그와 닫는 태그 사이의 모든 것을 리턴 ex)Hello World! function Welcome(props) { return props.children --> props.children == Hello World! } JSON 메소드 JSON.stringify() : js객체 -> JSON 문자열로 반환 (object to JSON) JSON.parse() :JSON 문자열 -> js객체로 반환 (JS..