개발일지

// 리스트 선택시 색상을 변경하기 위한 state const [selectedColor, setSelectedColor] = useState(null); // 리스트 선택 이벤트, 클릭하면 selectedColor에 인자로 받은 color를 설정한다 const memberClick = (color) => { setSelectedColor(color); }; {backgroundColor.map((color) => { return ( { memberClick(color); }} backgroundColor={color} ..

리액트 생명주기 Mount => Update => Umount DOM(Document Object Model)Element를 트리형태로 표현한 것 (DOM Tree)트리의 요소 하나하나를 노드라고 하고, 각각의 노드는 해당 노드에 접근과 제어(조작)이 가능한 Api를 제공한다(API = 기능 모음집, html요소에 접근하여 수정할 수 있는 함수 느낌)EXdocument.getElementById("dom").innerHTML="hello" > dom이란 id를 갖고 있는 요소를 찾아서 hello 글씨를 넣어줘const element =document.getElementsByTagName("p") > p 태그를 element 이 변수에 저장해 줘if(id.value===0 || id.length==="")..

최적화 종류React.memouseCallbackuseMemo 리렌더링 조건1. 컴포넌트의 state가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링되면 자식도 모두 리렌더링 된다  컴포넌트란? 어떤 기능을 모아서 독립적으로 사용하는 함수로, 기능의 집합 같은 것이다컴포넌트 내부에는 컴포넌트에 관한 것들로만 채워야 한다(독립적인 사용과 협업 시 혼선을 주지 않기 위해)컴포넌트 내부 함수들은 컴포넌트의 기능을 위한 메서드와 같은 것이다.반복적인 함수는 컴포넌트를 분리하여 관리하고, 하나의 컴포넌트만 사용하는 함수는 내부에 선언하여 사용된다.스타일의 경우, 전역으로 선언하여 다른 컴포넌트들이 접근할 수 있게 하거나, 스타일을 위한 컴포넌트를 생성하여 관리하는..

Hook state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행 되도록 만든 것 Hook 규칙최상위에서만 호출한다반복문, 조건문, 중첩 함수 내에서 호출 불가 (호출 순서에 의지하기 때문에 해당 부분을 건너뛰는 일이 생길 수 있다)React 함수 내에서만 호출이 가능하다, 일반적인 js에선 사용 불가 컴포넌트 내부에서만 사용할것 Hook의 종류useStateuseEffectuseRefuseContextuseState가장 기본적인 hook함수형 컴포넌트 내에서 가변적인 상태를 갖게한다문법 const [state, setState] = useState(초기값);원래 useState의 리턴값은 배열이다, [state, setState] 이렇게 구조분해할당을 통해 값을 받은 것배치 업데이트..

지역 스타일링전역 스타일링default style 제거 스타일 컴포넌트 설치 방법확장 > vscode-styled-components 설치터미널에 yanr add styled-components 입력(난 npm add styled-components 이렇게 입력했는데 보안 외에 문제는 없다 함) package.json에 "styled-components": "^6.1.8" 있으면 제대로 설치된 것지역 스타일링스타일을 입힐 컴포넌트를 만든다(지역 스타일링), 변수 선언 = 스타일. 스타일입힐 태그명 `백틱 내부에 스타일 입력`선언된 변수 명을 태그명에 넣는다 =>  border: 1px solid ${(props) => props.borderColor}; props로 borderColor 을 전달받는다i..

return ( 🔥Working {/* isDone의 상태에 따라 todo가 반환된다. */} {list .filter((item) => !item.isDone) .map((item) => { return ( // 필터링된 div 컴포넌트와 연결 ); })} 🌈Done! {list .filter(function (item) { return item.isDone; }) .map(function (item) {..

TodoList 과제 필수 구현 기능제목, 내용을 입력하여 Working에 추가, 삭제 완료 버튼을 누르면 이벤트를 받은 todo가 Done로 내려가고 취소를 누르면 다시 Working로 돌아올 것초기값 설정const [list, setList] = useState([ { id: 1, title: "todoList", content: "과제를 해봅시다", isDone: false, regDate: (() => { const now = new Date(); const today = now.getFullYear() + "년" + (now.getMonth() + 1) + ..

컴포넌트에 클릭 이벤트 적용방법컴포넌트에 버튼을 만든다onclick={(e) =>{ alert('이벤트'); }} 인라인으로 직접 이벤트를 작성해줘도 되지만, 함수를 작성하여 컴포넌트에 함수를 연결해주었다주의 * onclick 안에 함수를 연결해줄때 함수명(); 이런식으로 소괄호를 할 경우, 연결이 아닌 해당 함수의 호출이되어버린다    부모 자식 컴포넌트 연결하기값을 보낼 부모 컴포넌트의 return에 자식 컴포넌트를 입력하면 부모, 자식 컴포넌트가 서로 연결되어 "나는 아들입니다" 메세지가 화면에 나온다  컴포넌트에 props 전달하기props란 컴포넌트끼리의 정보 교환 방식이다부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 컴포넌트 간의 정보 교류방법이다props는 반드시 위에서 아래 방향으로 흘..

npm | Yarn  JavaScript 언어를 위한 패키지 매니저로, 프로젝트에서 필요한 패키지들을 관리하고 설치하는 데 사용된다. 이전에는 둘이 속도 부분에서도 차이가 있었다고 하지만, 이제는 거의 차이가 없다고 한다 npm은 의존관계를 (한 요소가 다른 요소에게서 필요한 것을 얻거나, 다른 요소에 영향을 받아 기능을 수행하는 상태) 가지는 다른 패키지들도 자동으로 설치됨으로 보안 문제가 발생할 수 있다 Yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 하기 때문에 보안이 더 안전하다.Yarn이 npm보다 용량이 더 큰 편이다. 리액트 첫 프로젝트  꼭 Node.js는 LTS 버전으로 설치할 것 프로젝트 폴더를 미리 만들어 준 후 폴더 내에서 Shift + 마우스 오른..

// 댓글 입력 폼 const commentForm = document.querySelector('.commentForm');// 댓글 목록 ulconst commentBox = document.querySelector('.commentBox');// 폼 submit 이벤트commentForm.addEventListener("submit", (e) => { // 폼은 기본적으로 새로고침을한다. 이벤트의 기본 동작을 취소시킴(새로고침 막기) e.preventDefault(); // 인풋 가져오기 const userName = document.querySelector('.userName') const comment = document.querySelector('.comment') const pw ..