코딩연습장

부모 컴포넌트 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..

//App.js import React from 'react'; import './App.css'; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; //App.css .app-wrap { //내부 간격주기 padding: 100px; //배치방식, 가로방향 display: flex; //안의 요소들 사이의 거리 gap: 12px; } .app-item { //가로 width: 100px; //세로 height: 100px; //경계선처리 border: 1px solid lightgreen; //경계선 구석 둥글게 border-radius: 10px; //배치방식, 가로방향 display: flex; //수직축 방향 정렬, 가운데정렬..

import React, { useState } from 'react'; function App() { const [counter, setCounter] = useState(0); function onClickCounter() { setCounter(counter + 1); } function onClickdisCounter() { setCounter(counter - 1); } return ( {counter} + {/* 익명함수사용 */} { setCounter(counter + 1); }} > + - {/* 익명함수사용 */} { setCounter(counter - 1); }} > - ); } export default App; 나는 function을 직접 만들어서 onClick에 넣었는데, 강사..

컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성됩니다. 컴포넌트는 UI구축작업을 쉽게 만들어줍니다. 컴포넌트는 화면의 특정부분이 어떻게 생길지 정하는 선언체입니다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요한데, 그 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM객체를 조작하는 명령형 프로그래밍 방식으로 구현했습니다. 명령형은 어떻게(How)를 중요시해 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. 선언형은 무엇(What)을 중요시 여겨 제어의 흐름보다는 원하는 목적을 중요시여기는 형태입니다. DOM(명령형 프로그래밍) 명령형으로 작성된 코..

객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드는 어떤게 있을까? 1) 배열 위에서 말했듯이, 불변성이 없는 데이터이다보니 값이변했을때 리렌더링하기위해 불변성을 지켜주며 값을 바꿔야한다. 1) 배열 값 추가하기 배열 값을 변경할 때에는 불변성을 지켜줘야한다. 배열의 push, splice, sort등의 함수를 사용하면 안된다. 배열을 수정하는 방법에는 2가지가 있다. spread operator(...), concat()을 사용하는 방법이다. 먼저 spread operator setUsers([...users, newUser]); 기존의 배열을 수정하지 않고, 새로운 요소가 추가된 배열을 만들어내는 방식이다. concat()함수 사용 setUsers(users.concat(user))..