프론트엔드(35)
-
React 입문 - Props
Props : 부모 컴포넌트로부터 받아온 데이터 // src/App.js import React from "react"; function App() { return ; } function GrandFather() { return ; } function Mother() { const name = '홍부인'; return ; } function Child() { return 연결 성공; } export default App; 위와 같은 코드에서 자식 컴포넌트가 마더 컴포넌트로 부터 데이터를 받을 때 아래 코드와 같이 적용하면 된다. // src/App.js import React from "react"; function App() { return ; } function GrandFather() { retur..
2022.12.26 -
React 입문 - Component
컴포넌트의 기본 구조 // import React from 'react'; function App() { // return ( /* */ ); } // export default App; component는 레고 블럭같은 존재! 컨포넌트를 외부에서 가져올때는 import(컴포넌트 맨 위 코드)를 해줘야하고 내보낼때는 export(컴포넌트 맨아래 코드)를 해야한다. 그리고 App 함수 안에는 return 문을 기준으로 위로는 자바스크립트를 쓰는 영역, 아래는 JSX를 쓰는 영역이 존재한다. 컴포넌트 이용시 주의할 점! 컴포넌트 사용시 이름의 첫 글자는 대문자를 사용해야한다. (예 - App ) 폴더의 이름의 경우 소문자를 사용해야한다. 이름 짓는 방법 : 변수명이나 클래스명을 만들때 규칙을 정해서 만든다...
2022.12.26 -
JSX 기초 - html을 품은 JS
태그는 꼭 닫아주어야한다. 하나의 Element만 반환할 수 있다. ( 마지막에 태그에 담아주면 된다.) return ( 안녕하세요! 리액트 반입니다 :) ); 위 코드를 실행하면 엘리먼트가 2개라서 에러가 난다. return ( 안녕하세요! 리액트 반입니다 :) ); 이렇게 return안에 맨 앞에 맨 뒤에 태그를 넣어주면 하나로 인식되서 정상 작동 된다! JSX안에서 자바스크립트를 사용하려면 중괄호를 사용해야한다. { } 삼항연산자를 사용할때도 중괄호를 사용해서 하면 된다. class를 사용하지 않고 className을 사용한다. Html태그에 style을 직접 사용할 수 없다. btn // 기존 html에서 사용하던 방식 btn // JSX에서 사용할 수 있는 방식 const styles = { c..
2022.12.26 -
알고리즘 문제 풀기 (JS입문) - 직사각형 별 찍기
문제 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 예제 phone_number return "01033334444" "*******4444" "027778888" "*****8888" function solution(phone_number) { var answer = ''; return answer; } 내가 푼 답 function solution(phone_number) { var answer = '..
2022.12.26 -
React 입문 - React / DOM / JSX
라이브러리는 angular
2022.12.24