[27] 리액트 동적스타일

동적스타일 어떤 조건에 맞는 스타일속성을 지정해줄때가있다. 이런 동적인스타일을 적용시키는데에는 여러가지 방법이 존재하는데 크게 해당 요소에 인라인속성을줘서 주는방법이있고 미리 클래스에 스타일을 적용시킨다음에 해당조건에맞으면 클래스이름을 주거나 삭제시키는 방법으로 할수도있다. import React, { useState } from "react"; import Button from "../../UI/Button/Button"; import "./CourseInput.css"; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(""); const [isValid, setIsValid] = useState(true..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 8.
• textsms

[26] 리액트 상태 끌어올리기

리액트는 부모에서 자식 컴포넌트로 데이터를 내려주는것을 props 로 해왔다 그럼 자식에서 부모로 데이터를 이동시켜야할때는 어떻게 할까? 만약에 글작성하는 컴포넌트와 글을 보여주는 컴포넌트가 있다고 가정해봤을때 글작성에서 데이터를 입력받아 해당 데이터를 보여주는 컴포넌트로 이동할때 부모와 자식간의 구조가 아니라면 어떻게 처리를 해야될까? 부모컴포넌트에 함수를 선언하고 해당함수를 props 로 자식컴포넌트에 넘긴다 그리고 그 자식컴포넌트는 해당함수의 매개변수를 통해 전달하면 자식컴포넌트에서 부모컴포넌트로 데이터를 이동시킬수있다! 이를 코드로 한번 살펴보자 // 부모컴포넌트 const NewExpense = (props) => { // 데이터를 받기위한 함수 생성 const saveExpenseDateHan..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 6.
• textsms

[25] react 의 JSX

궁금증 리액트 create react app 의 JSX 문법은 개발자가 보기편하게 만들어준다. 근데 가끔은 리액트 컴포넌트를 보면 return 밑으로 작성된 JSX 의 코드가 원래는 어떻게 동작할까 ? 라는 의문이 들때가있다. 또한 상위요소가 필수적으로 하나가 필요해야되는 이유가 무엇인지 궁금했고, 원래는 어떤 코드였고 JSX 를통해서 보기좋게 변하게됬는지 ? 간단하게 알아보자. 먼저 기본적으로 간단한 컴포넌트를 보자. function Example() { return ( hi $1000 ); } 컴포넌트에 상위div 태그 안에 h2, div 를 나타내고있다. JSX 를 통해 상당히 개발자가 보기 편한대 아주 이전의 리액트에서는 다르게 표시했었다. import React from 'react&#3..

• format_list_bulleted 프론트엔드/React
• · 2022. 12. 5.
• textsms

[24] 클로저

클로저란? MDN 에서의 클로저의 정의는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이라고 나와있다 이게 도대체 무슨말인가?? 이를 이해하기위해서는 함수가 선언된 렉시컬 환경 을 이해해야할것이다. 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어인데 함수를 어디서 호출했느냐 가 중요한게 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는것이다. const x = 1 ; function foo () { const x = 10 ; bar (); } function bar () { console.log(x); } foo(); // 1 bar(); // 1 결국 상위 스코프는 렉시컬환경에서 자신의 외부 렉시컬 환경 정보를 저장하는 outer lexical Environment Reference ..

• format_list_bulleted 프론트엔드/JavaScript
• · 2022. 12. 2.
• textsms

[23일] array method

리액트 에서는 불변 방식으로 배열작업에 의존하기에 그에 필요한 자료들과 학습을 진행해봤다. map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find findIndex() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex filter() => https://developer.moz..

• format_list_bulleted 프론트엔드/JavaScript
• · 2022. 12. 1.
• textsms

[22일] this

this ? ​ this 는 호출할때 어떤객체를 바라보는지 결정이된다. 전역공간에서 this 호출 - 전역객체를 가르킴 함수에서 호출 - 전역객체를 가르킴 : 실행컨텍스트가 활성화 할 당시 this 가 지정되지않을경우 this 는 전역객체를 바라보게됨 메서드에서 호출 - 호출의 주체를 가르키게됨 메서드의 내부함수에서 호출 - 호출주체에 따라 다르게되는데 함수로써 호출된다면 전역객체를 바라보게됨, 아니라면 호출주체를 바라보게됨 화살표 함수 - 실생컨텍스트에 생성할때 this바인딩 과정 자체가 없어서 값이 유지됨 ​

• format_list_bulleted 프론트엔드/JavaScript
• · 2022. 12. 1.
• textsms