코딩연습장

Ref란? ref는 render에서 생성된 DOM이나 React element에 접근하는 방법을 제공해준다. 일반적으로 부모 컴포넌트가 자식 컴포넌트와 상호작용 가능한 것은 props가 유일하다. 자식 컴포넌트를 수정하려면 새로운 props를 전달하여 자식을 렌더링 해야하는데, 가끔 직접적으로 자식을 수정해야하는 경우도 발생한다. 이때 DOM element에 접근하기 위해 Ref를 사용한다. HTML을 작성할 때 div같은 태그에 id를 달아 특정 id에 해당하는 DOM요소에만 스타일을 적용하거나, 해당 DOM요소에 접근해 여러 작업을 할 수있다. 하지만 컴포넌트를 재사용한다면 그 id가 중복 될 수 있어, 컴포넌트 내부에서만 작동하는 Ref를 사용해야한다. Ref를 사용해야 할 때는 다음과 같다. fo..

event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요? 함수형 컴포넌트에서 이벤트리스너를 해제하려면 useEffect 훅을 사용해야 한다. dependency를 선언하여 시점을 구분해준다. useEffect(() => { // }, [dependency선언위치]) dependency를 선언하지 않고 빈배열을 넣으면 최초 로드시 렌더링이 된다. 그래서 최초 로드시 addEventListener을 사용해 이벤트를 ..

양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.) 먼저 데이터 바인딩이란 무엇일까? 화면상에 보여지는 데이터와 브라우저 메모리에 있는 데이터를 묶어 서로간의 데이터를 동기화하는 것을 의미한다. HTML에서 서버 혹은 스크립트 상에서 받아온 데이터를 화면상에 그려주고 있을 때 해당 값이 변경되면 HTML상의 데이터를 변경된 값에 맞춰 주는 동작을 데이터 바인딩이라 한다. 데이터 바인딩 예제 아래 예제는 works로 초기화된 값을 HTML에 출력하고, 추가하기 버튼을 누르면 State를 변경하여 HTML에서 데이터 바인딩을 하는 예시이다. import React, { useState }..

오늘 리액트 입문주차 개인과제를 vercel을 이용하여 배포하고, README도 작성해보았다. 그리고 몇가지 코드를 수정한 것이 있어 이걸 작성해보고자 한다. //Work 추가하기 버튼핸들러 const addWorkHandler = () => { const newWork = { id: works.length+1, title: title, desc: desc, isDone: false, }; setWorks([...works, newWork]); //인풋태그value 제거하기위함 setTitle(''); setDesc(''); }; State에 값을 추가하는 버튼에대한 핸들러함수이다. 여기서 id값을 works.length+1로 주는데, 스터디팀원분인 이재정님께서 문제점을 제기해주셨다. 우리는 삭제버튼도 ..

부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? 1. setState()에 의하여 부모 컴포넌트A의 State가 변경된다. 2. 부모 컴포넌트가 리렌더링된다. 3. 바뀐 State를 props로 자식 컴포넌트에게 넘겨준다. 4. 자식 컴포넌트가 리렌더링된다. 5. 바뀐 부분에 대해 페이지가 그려진다.

배열 JavaScript의 배열은 여러 자료형을 가질 수 있는 특징이 있다. 배열을 사용하면 여러 자료형의 데이터를 관련성있게 관리할 수 있어 코드가독성이 높아지고, 생산성이 높다. 유사배열(Array-Like Object) 유사배열은 말 그대로 배열과 유사한 객체를 의미한다. 함수에서 처리결과로 배열을 반환하고싶을때, 배열에서 기본으로 내포돼있는 기능을 제공하고 싶지 않고나, 매열에 내포되어있지 않은 기능을 제공하고 싶을 때 사용한다. 월드컵이라는 검색어로 나온 뉴스를 영역으로 NodeList를 받았고, length:10을 가지고 있었다. 근데? 배열이 아니다. NodeList에 대한 typeof가 배열과 같게 'object'가 반환되었지만, Array.isArray(arr)이 false로 반환되었다...

이번 주차는 알고리즘 주차였다. 그래서 먼저 알고리즘에 관한 WIL을 작성하고, JS의 ES에 대해 알아보고자 한다. 풀스택때도 내가 당최 뭘한건지 라는 생각이 들었던 터라 사실 알고리즘 주차에 문제들을 잘 풀수 있을지 걱정이 됐었다. 프로그래머스의 알고리즘 풀이를 작성하는 창을 키고 문제를 읽고, 제한사항을 보고, 입출력예를 본 뒤 코드를 작성해야하는데 어떻게 작성해야하는지조차 생각이 나지 않았다. 처음 문제는 직사각형 별 찍기였다. 분명 책으로 혼자 공부할때 for문을 사용하여 작성했었는데, 방법이 전혀 떠오르지않아 처음 문제부터 타인의 답안을 보고 코드를 이해하도록 하였다. 두번째 문제부터 if문을 사용하기 시작했고, 문제해석이 잘되어 생각보다 막히는 문제가 없이 쭉쭉 풀렸던 것 같다. 여러문제들을..

props는 부모컴포넌트에서 자식컴포넌트로 전달하는 값이다. 규칙중에 자식컴포넌트는 부모컴포넌트로 props를 전달하지 못하는 것이 있다. 그럼 함수를 내려보면 어떨까? 함수에 useState의 변경하는 함수를 넣어두고. const removeWorkHandler = (id) => { //해당 id값만 제거 const newWorkList = works.filter((work) => work.id !== id); //state 재할당 setWorks(newWorkList); }; 에를 들면 위와 같은 함수를 내리면, 자식컴포넌트에 해당 함수를 내리고 그 함수를 자식객체에서 어떠한 방법으로 사용했을 때 setWorks를 사용해 부모컴포넌트에서 정의된 State를 변경할 수 있다. 규칙을 어긋나는 리액트만의..

import React from 'react'; import './App.css'; // 🔥 반드시 App.css 파일을 import 해줘야 합니다. import { useState } from 'react'; //버튼별로 색, 클릭을 주기위한 컴포넌트 function CustomButton(props) { . . . . . } //나이와 이름을 나타내기위한 자식컴포넌트 function User(props) { . . . . . } const App = () => { . . . . }; export default App; 전에 사용했던 App.js파일이다. 이렇게 User, CustomButton컴포넌트들을 하나에 뭉쳐놓으면 App.js의 역할이 명확하지 않다. 그래서 아래와 같이 컴포넌트 폴더를 만들어..

//App.js import React from 'react'; import './App.css'; function App() { const vegetables = ['감자', '고구마', '오이', '가지', '옥수수']; return ( {vegetables.map((vegetableName) => { return ( {vegetableName} ); })} ); } export default App; //App.css .app-style { padding: 100px; display: flex; gap: 12px; } .square-style { width: 100px; height: 100px; border: 1px solid lightgreen; border-radius: 10px; displa..