KDT TIL Note/React10 [막시밀리언] 리액트 컴포넌트 스타일링 동적 인라인 스타일 설정하기 아무 입력값 넣지 않을 때에도 스타일링되어 요소가 등장하는 것을 입력된 것이 없을 때(trim한 뒤의 입력값 길이가 0)에는 아무 것도 나타나지 않게 그냥 return 이 상황(사용자가 유효하지 않은 값을 입력)에서의 사용자에게 보내는 피드백 스타일링. 가장 쉬운 방법은 레이블에 인라인 스타일을 추가. 입력값이 유효한지 판단할 state를 하나 만들고 그것의 값에 따라 유효하면 검정색 라벨이 되고, 유효하지 않으면 빨간색 라벨이 되게 style 속성을 이용하여 인라인으로 스타일링했다. 여기서 다시 신경써볼 문제는 1. 위의 스타일링이 리셋이 되는 것 2. 인라인 스타일링은 CSS에서 우선 적용되므로 우리가 설정한 모든 스타일을 오버라이드할 것 1. 2. invalid 클래스를.. 2023. 2. 18. [막시밀리언] 리액트 State 및 이벤트 다루기 리액트는 선언적 접근 방법을 따르는데, 이는 우리가 원하는 목표 상태(UI)를 정의하고 리액트가 그 상태에 도달하도록 처리한다는 것을 의미한다. 의 DOM interface https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement HTMLButtonElement - Web APIs | MDN The HTMLButtonElement interface provides properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating elements. developer.mozilla.org .. 2023. 2. 16. [막시밀리언] 리액트 기초 및 실습 컴포넌트 35강~48강 기본설정(preference) > 바로가기 키(keyboard shortcut) > format document 입력 문서 포맷 단축키 shift + alt + f toLocaleString의 매개변수 첫번째: 언어, 두번째: 해당 날짜 형식 해당 날짜 형식 옵션 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString Date.prototype.toLocaleString() - JavaScript | MDN The toLocaleString() method returns a string with a language-sensitive representation of this date.. 2023. 2. 15. [StephenGrider 강의] 모던 리액트와 리덕스 - state in 클래스기반 컴포넌트 state는 자바스크립트 객체로, 유저 이벤트를 저장하고 반응하는데 이용된다. 클래스형 컴포넌트는 그 자신의 복사된 state 객체를 가지고 있고, state가 바뀔때마다 컴포넌트는 즉시 리렌더링하고 자식요소들에게도 렌더링하도록 강제한다.(render 함수 실행) state를 사용하기 전에 state 객체를 초기화해야 하므로, 클래스의 constructor 메소드 안의 자바스크립트 객체에 state들의 프로퍼티(아래에서는 term)를 정하여 넣는다. 위의 초록색 점선 박스 부분이 클래스형 컴포넌트에서 state를 정의하거나 초기화하는 방법이다. cf. 함수형 컴포넌트는 state를 가지지 않는다. 모든 자바스크립트 클래스는 constructor라는 함수를 가지고 있고, 클래스가 생성될 때마다/ 새 인스턴.. 2023. 2. 7. [StephenGrider 강의] 모던 리액트와 리덕스 - 개발환경 설정 프로젝트를 실행하기 위한 도구들을 설치해야 하는데, 우선 노드 패키지 매니저(NPM)를 사용하여 프로젝트를 실행한다. npm 설치로 프로젝트의 의존성(프로젝트를 구성하여 작동시는 여러 패키지들)을 관리할 수 있게 된다. npm install 보일러플레이트 패키지를 시작하고 로컬 서버를 실행시킨다. npm start 이 패키지 안에는 자바스크립트 파일을 포함해 여러 파일들이 있는데, 바벨과 웹팩이 이 모든 것들을 합치고, ES5로 변환시켜 브라우저에서 작동되게끔 만든다. 그리고 이 모든 파일들을 볼 수 있는 로컬서버를 이용할 수 있게 해준다. 아래와 같이, 컴파일이 끝난 전체 패키지를 볼 수 있다. 위의 코드에서 보다시피, 이 패키지는 로컬서버 localhost:8080으로 들어갈 수 있다. 프로젝트의 i.. 2023. 2. 3. [winterlood 강의] React App 만들기 note React.js : Node 기반의 JS UI 라이브러리 Webpack : 여러 개의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 Create React App : 리액트에 필요한 패키지들과 복잡한 환경설정 등을 미리 설치해놓고 바로 사용할 수 있도록 감싸놓은 패키지(Boiler Plate; 틀, 표준의 의미) '보일러 플레이트' 용어의 기원 >> https://whynameitthat.blogspot.com/2013/10/boiler-plate.html Boiler Plate The origins of interesting names of places, people, products, b.. 2023. 1. 20. [winterlood 강의] 리액트가 필요한 이유 리액트가 필요한 이유 1. 산탄총 수술(Shotgun Surgery) : 여러 파일에 걸쳐 중복 코드들(ex. header, footer 등)이 작성된 프로그램에서 그 중복 코드 내에 수정이 생기면 그 코드를 포함하고 있는 많은 파일에 이를 일일이 수정 적해줘야 하는 문제가 생김. => 각 페이지에 공통적으로 적용될 부분들은 별도의 파일이나 모듈로 제작 ; 컴포넌트(Component)화 방식 리액트는 컴포넌트 기반의 UI 라이브러리 2. 선언형 프로그래밍 : 예전에 주로 사용하던 제이쿼리(jQuery)는 절차를 하나하나 다 나열해야하는 명령형 프로그래밍 방식의 설계이다. 절차 대신 목적을 먼저 말하는 선언형 프로그래밍 방식의 설계의 리액트가 프론트엔드 측면 개발에서는 더욱 효율적이다. 3. 가상 돔(Vi.. 2023. 1. 16. [KDT 강의] 리액트 뜯어보며 이해하기 2 props : 부모 컴포넌트로부터 상속받는 자식 컴포넌트에 데이터를 전달하는 방법 자식 컴포넌트에서 읽기 전용(immutable)으로 사용되며, 변경하고자 할 때는 부모 컴포넌트에서 state를 조작해야 한다. VS state : 해당 컴포넌트 내에서 데이터를 전달하는 방법 변경 가능(mutable)하고 변경이 되면 화면이 re-render 된다. 자식 컴포넌트의 state들을 한 곳에서 모아 유지해야 하거나, 두 개의 자식 컴포넌트들이 서로 통신을 해야해서 가능하게 하려면, 부모 컴포넌트에 공유 state를 정의해야 한다 ! => 부모 컴포넌트는 props를 사용해 자식 컴포넌트에 state를 다시 전달할 수 있고, 이를 통해 자식 컴포넌트들이 서로 혹은 부모 컴포넌트와 동기화하도록 만든다. React.. 2023. 1. 13. [KDT 강의] 리액트 뜯어보며 이해하기 클래스형 컴포넌트를 사용할 때는, 화면에 렌더할 때 React.Component에 있는 render() 메소드를 사용해줘야 한다. 사용하면 좋을 extension tool 컴포넌트를 보다 손쉽게 생성할 수 있게 해준다 ! ex) rfc => 기본적인 함수형 컴포넌트 생성해 줌. (React Functional Component) rcc => 기본적인 클래스형 컴포넌트 생성해 줌. (React Class Component) rccp => React Class Component PropType rce => React Class Export TicTacToe App 만들기 리액트에서는 컴포넌트 간에 데이터가 오고갈 때, Props를 사용한다 ! 특별히 상속하는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하.. 2023. 1. 6. 이전 1 2 다음
