본문 바로가기

FE54

state Lifting state를 활용하다보면 같은 값을 공유하고 싶은 컴포넌트가 생긴다. 이 컴포넌트에서 입력한 값이 다른 컴포넌트에서도 반영되길 바라는 것. props를 떠올릴 텐데 좋은 접근이다. 다만 props는 형제 요소에겐 줄 수 없다. 이때 필요한게 state lifting이다. 버튼을 누를 때 1씩 늘어나는 컴포넌트와, 10씩 늘어나는 컴포넌트로 예시를 들어본다. 먼저 메인페이지를 만들고 컴포넌트를 만들었다. 그리고 각각 함수를 설정했다. index.jsx import Count_first from "./Count_first"; import Count_second from "./Count_second"; export default function Main() { return ( ); } Count_first.j.. 2022. 9. 26.
Shallow Copy & Deep Copy 객체를 열심히 만들고 새로운 객체에 이전 객체 값을 복사해 사용하다보면 난감한 일이 생긴다. 복사본을 수정했음에도 원본 객체가 바뀌는 일이다. 이때 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)를 알아야할 때다. 이는 지난 번에 올렸던 원시 타입과 참조 타입을 알고 있다면 상대적으로 이해하기 쉽다. 참조 타입 특성으로 인해 나타나는 차이기 때문이다. 얕은 복사 const first = { name:"코난", age:8, school:"타이탄초등학교" } const second = first; console.log(second) // { name: '코난', age: 8, school: '타이탄초등학교' } 위와 같이 코드를 작성했다면 second에 first에 객체가 그대로 복사된다.. 2022. 9. 24.
== & === 자바스크립트를 배우면서 제일 어색했던 게 비교 연산자가 아닐까 싶다. 그 중에서도 동등연산자(==)와 일치연산자(===)가 탑이다. 학교 다닐때 배운적이 있나 싶을 정도다. 아주 간단하지만, 프로그래밍에선 꼭 인지하고 있어야할 두 연산자. 비슷하면서도 확연이 다른 이 두 연산자를 비교했다. 동등 연산자(==) 두 피연산자가 동일한지 확인하며, boolean 값을 반환한다. 이때 타입 즉 자료형이 다르면 동일한 타입으로 변환한다. 숫자와 문자열 비교면 숫자 타입으로, 하나의 피연산자가 boolean일 경우 true라면 1을 반환하고 false라면 +0을 반환한다. 객체와 숫자 혹은 객체와 문자열이라면 객체를 valueOf()나 toString()으로 변환 후 비교한다. 일치연산자(===) 두 피연산자가 동.. 2022. 9. 23.
Container-Presenter container와 presenter는 리액트의 코드 디자인 패턴이다. 2015년에 개발자 Dan Abramov가 처음 소개했으며, 현재는 리액트의 고전 디자인 패턴이라 해도 무방하다. 싱글페이지, 구조관련과 기능을 한페이지에서 작성할 수 있는 jsx가 반영된 게 리액트의 장점임을 우리는 알고 있다. 다만, 프로젝트가 커지다보면 한 파일 내에 모든 코드가 다 있다보니 편해서 사용했지만, 어느순간 불편함을 초래한다. 이를 해결하고자 나온게 코드 디자인 패턴들이다. Container-Presenter는 그 패턴 중 하나다. 구조 Container-Presenter 디자인 구조는 기본 개념은 간단하다. 기능 부분과 보여주는 부분을 단순하게 분리하는 것. 페이지 함수에서 여러 기능이 포함되고 리턴에서 화면을 그.. 2022. 9. 21.
Primitive type & Reference type Primitive type(원시타입)과 Reference type(참조타입)은 프로그래밍의 근간이다. 이에 대한 이해도가 없다면 for문을 배워도 if를 배워도 금방 한계에 봉착한다. 어려운 것은 아니나, 그렇다고 빠르게 이해할 수 없었떤 두 가지를 정리한다. 간단 비교하고 시작하자면 원시타입은 정수, 실수, 불린 등 실제 데이터를 담은 것이고, 참조타입은 해당 데이터가 담긴 주소를 갖고 있다. Primitive type 원시타입은 객체나 메서드가 아닌 데이터 그 자체를 갖고 있는 것을 말한다. 대부분의 저급 언어가 가진 특징이며, 이미 생성한 원시타입의 값은 불변하다는 특징을 갖는다. 자바스크립트에서 원시타입은 7개만 알면 끝이다(ES6 기준). 원시타입의 종류와 기본 특징은 아래와 같다. string.. 2022. 9. 20.

티스토리툴바