DDOstory

[React] 섭씨 온도와 화씨 온도 표시하기재사용이 가능한 형태로 컴포넌트를 만들어 사용하는 것이 효율적BoilingVerdict 문장은 섭씨온도의 값을 props로 받아서 100도씨 이상이면 물이 끓는다는 문자열을 출력하고 외에는 물이 끓지 않는다는 문자열을 출력Calculator라는 컴포넌트는 State로 온도값을 하나 갖고 있고 사용자로부터 입력을 받기 위해 input 태그를 사용하여 ControlledComponent 형태로 구현사용자가 온도를 변경할 때마다 handleChange 함수 호출SetTemperature함수를 통해 온도값을 갖고 있는 Temperature라는 이름의 State를 업데이트State에 있는 온도 값은 앞에서 만든 BoilingVerdict 컴포넌트에 celsius라는 이..

[React] 사용자 정보 입력 받기signup 컴포넌트는 이름을 입력할 수 있는 input 태그와 입력된 값을 저장하기 위한 name이라는 state를 가지고 있음select 태그에는 총 두가지 옵션이 들어가 있는데 select 태그의 값이 변경되면 처리하기 위해 handleChangeGender라는 이벤트 핸들러를 만들어서 사용 📲 Form사용자가 무언가를 선택을 해야 하는 것사용자로부터 입력을 받기 위해 사용// HTML Form 이름: 제출리액트에서도 잘 작동하지만 자바스크립트 코드를 통해 사용자가 입력한 갑에 접근하기에는 불편한 구조자바스크립트 코드에서 사용자가 입력한 값에 접근하고 제어할 수 있어야 웹페이지를 개발할 때 더 편리📲 Controlled Co..

map 함수를 사용해서 리스트를 렌더링 했는데 각 엘리먼트에 키가 빠져 오류가 나는 상황화면에 각 학생 객체의 고유한 값을 가진 아이디를 추가map 함수의 엘리먼트에 아이디를 값으로 해서 키를 넣어줌key를 포맷팅 된 문자열을 key로 사용할 수도 있고 인덱스를 키로 사용할 수도 있음AttendanceBook 컴포넌트는 student라는 배열로부터 학생 정보가 담긴 객체를 받아 학생들의 이름을 목록 형태로 출력하는 컴포넌트배열을 렌더링 하기 위해 map() 함수 사용 🎖️ List같은 아이템을 순서대로 모아놓은 것이 리스트에 해당리스트를 위해 사용하는 자료구조는 배열 (Array)배열은 JavaScript의 변수나 객체를 하나의 변수로 묶어 놓은 것을 의미const numbers = [1, 2, 3, ..

Toolbar 컴포넌트는 사용자의 로그인 여부를 나타내는 isLoggedin이라는 값을 props로 받아서 조건부 렌더링을 사용하여 환영 메시지를 표시하거나 감추고 로그인 로그아웃 버튼을 보여주는 역할을 함엔드 연산자와 삼향 연산자를 사용하여 각각 inline-if와 inline-if-else 조건부 렌더링을 구현랜딩페이지 컴포넌트는 useStateHook을 사용하여 사용자의 로그인 여부를 자체적으로 관리툴바 컴포넌트에 값을 전달하여 로그인 여부에 따라 툴바에 적절한 사용자 인터페이스가 표시되도록 함💎 Conditional Rendering리액트로 개발할 때 자주 사용하게 되는 기능조건에 따른 렌더링 (= 조건부 렌더링)어떠한 조건에 따라서 렌더링이 달라지는 것을 의미조건문의 결과는 true 또는 fa..

ConfirmButton 컴포넌트는 확인 여부를 저장하기 위해 state의 isComfirmed라는 변수를 가지고 있고 초기값은 false임버튼의 onclick 이벤트를 처리하기 위해 이벤트 핸들러로 handleComfirmed라는 함수를 만듬bind를 사용하는 방식으로 이벤트 핸들러를 처리확인 버튼을 누르면 클릭 이벤트가 이벤트 핸들러로 전달되고 isComfirmed의 값이 true로 변경되면서 버튼이 비활성화바인트 코드 제거arrow function을 사용하기 위해 이벤트 핸들러 수정이전과 동일한 결과가 나옴state는 useStateHook을 사용하여 처리eventHandler는 arrow function을 사용하여 만듬 🥰 Events특정 사건을 의미사용자가 버튼을 클릭하는 사건도 하나의 이벤트..

notification 컴포넌트는 state에 아무런 값을 가지고 있지 않음 생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화 클래스 컴포넌트에서 state를 업데이트 하려면 반드시 setState 함수 사용키는 리액트 엘리먼트를 구분하기 위한 고유의 값맵 함수를 사용할 때에는 필수적으로 들어가야 함❤️ state리액트 Component의 상태를 의미리액트 Component의 데이터라는 의미에 더 가까움리액트 Component의 변경 가능한 데이터미리 정해진 것이 아니라 리액트 Component를 개발하는 각 개발자가 직접 정의하여 사용렌더링이나 데이터 흐름에 사용되는 값만 state에 포함하여야 함state가 변경될 경우 Component가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 ..

1초마다 렌더링을 하며 시간을 알려주는 시계를 만들어 보았습니다 Elements는 한번 생성되면 변경할 수 없음React의 Elements는 변하지 않는 성질을 가지고 있어 생성 후 children또는 attributes를 변경할 수 없으며화면에 생성된 Elements를 업데이트하기 위해서는 기존 Elements를 변경하는 것이 아닌 새로운 Elements를 생성하면 됨React가 렌더링되는 과정은 VirtualDOM(React 엘리먼트)에서 실제 DOM(DOM 엘리먼트)으로 이동하는 과정  작성한 소스코드를 웹사이트로 실행하고 개발자 모드인 F12를 눌렀을 때 1초씩 지날 때마다 개발자 모드의 코드가 깜빡깜빡 거리며 시간이 변경이 되는 시계를 완성하였음라이브러리 불러오는 곳에서 아직 실수를 해서 오류가..

👨‍🎓 JSXReact를 사용하여 개발할 때 거의 필수적으로 사용A syntax extension to javaScript자바스크립트의 확장 문법JavaScript + XML/HTML을 결합한 것const element = Hello, world!;👨‍🎓 JSX 역할XML/HTML 코드를 JavaScript로 변환하는 과정을 거침// JSX를 사용한 코드class Hello extends React.Component{ render(){ return Hello {this.props.toWhat}; }}ReactDom.render( document.getElementById('root'));// JSX를 사용하지 않은 코드class Hello extends React.compone..

💍 Array 객체변수 하나에 여러 개의 값을 넣을 수 있음한꺼번에 자료를 모아서 처리할 수 있다는 장점 때문에 자바스크립트에서는 배열을 사용한 프로그래밍이 많음배열에 활용하는 많은 속성과 함수가 미리 정의되어 있는 객체  💍 Array 객체로 배열 만들기초깃값이 없을 때var myArray = new Array();초깃값이 있을 때 var numbers = ["one","two","three","four"]; // 리터럴을 사용한 배열var numbers = new Array("one", "two", "three", "four"); // Array 객체를 사용한 배열💍 배열을 만들어보고 배열을 사용하여 메서드 적용 방법 살펴보기concat은 2개 이상의 배열을 연결해서 새로운 배열을 만듬새로운 배..

공부 자료 : 인프런 Do it 자바스크립트 입문 https://www.inflearn.com/course/do-it-javascript/dashboard🪫사용자 정의 객체리터럴 표기법을 사용한 객체 만들기var book = { title : "자바스크립트", author : "고쌤", pages : 500, price: 15000, info : function( ){ alert(this.title + "책의 분량은 " + this.pages + "쪽 입니다."); }};🪫생성자 함수를 사용해 객체 만들기function Book(author, pages, price, title){ this.author = author; this.pages = pages; ..