본문 바로가기

전체 글

 (97)
props 의 이해 왜 사용할까? 부모 속성의 값을 다른 컴포넌트에 전달할 때 props를 이용하여 전달한다. 예를 들어 쇼핑몰 사이트를 만든다고 할 때 가격은 변하지 않는다 이는 부모에 미리 변수들을 선언하고 저장한다음에 이를 여러 컴포넌트에 뿌리면 1.한 곳에 사진 or 가격 데이터를 모으기 때문에 데이터 관리가 수월해지고 다른 컴포넌트에 필요할 경우 props를 이용해서 데이터를 전달하면 된다. 2.뿐만 아니라 한 곳에 모인 데이터 관리는 보완에 큰 장점을 지닌다. defaultProps의 사용. cf) img 태그에 src 경로 alt 와 비슷하다. 사람을 소개하는 페이지에 이름을 넣을 예정이면 props.name을 명시해 두고 언제든지 데이터 값이 들어올 준비 즉 변수 선언을 한다. 그러나 들어오지 않을 것을 대비..
react 처음 시작할 때!! 참고 리액트 설치 npm init react-app npm create react-app (웹팩 바벨의 설치가 포함되어 있음) 리액트 rounte 설치 npm install react-router-dom 리액트 실행 해당 디렉토리로 들어가 npm start 리액트 아이콘 설치 npm install react-icons --save // npm yarn add react-icons // yarn 리액트 알아보기 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; JSX를 쓰는 이유 JSX 형태란 J..
리엑트 2 props && state State란? 변경 될 수 있는 값으로 예를 들어 쇼핑몰의 물건의 개수 || 구매 금액 등을 예로 들 수 있다. 알아야할 사전지식 비구조화 할당 쓰는 이유: 각 각 변수에 선언하는 대신에 이거를 배열 또는 객체의 모습으로 한 번에 해결 할 수 있음. const [number, setNumber] = useState(0); useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다. 이 함수를 호출해주면 배열이 반환되는데요, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수입니다. 원래는 다음과 같이 해야하지만, const numberState = useState(0); const number = numberState[0]; const setNumber = numbe..
구조분해할당 구조 분해 할당 왜 필요한가? 첫 번째 예시는 배열이 [1,2,3] 을 새로운 변수 a,b,c에 대입하고 싶을 때, 일일이 변수를 선언하고 정의하면 효율적이지 않다. 그렇기 때문에 [a,b,c]=[1,2,3]을 하면 바로 대입도 가능하고 코드도 간결할 수 있다. 두 번째 MDN 에서는 구조분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 라고 정의한다. 구조 분해 할당이 필요한 이유는 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부가 필요한 경우가 생기는 것처럼 말이다. 이럴 때 객체나 배열으 ㄹ변수로 '분해'할 수 있게 해주는 문법이 구조 분해 할당(destru..
코드스테이츠 리엑트 리엑트 잘 하기 위한 사전지식!! 1. 화살표 함수 1. 컴포넌트 기반 2. 독립성 3. 재 사용성 리엑트를 왜 사용할까? 1. html javascript.js 파일을 따로 만들지 않고 한 페이지 안에서 처리가 가능하다. 2. JSX 1. 자바스크립트의 확장된 문법 but 자바스크립트 언어가 아니기 때문에 babel을 이용해서 컴퓨터가 이해할 수 있는 언어로 컴파일을 해줘야 함.
코드스테이츠 html의 또 다른 표현 방식 DOM!! DOM이 필요한 이유와 활용 방법 일련의 웹페이지가 user들에게 보이는 과정은 1브라우저가 문서를 파싱하여 읽고 스타일을 입히고 2.뷰 포인트로 보여주는 것 그렇다면 DOM은 이런 HTML 문서를 보여주는 또 다른 방식이며, 가장 큰 특징은 객체 방식으로 보여주는 것이다. 이것이 의미하는 것은 1. 속성을 자바스크립트 언어로 컨트롤이 가능하며 원하는대로 값을 바꿀 수 있다는 것이다. 2. 구조화 되어 있지 않는 HTML 문서는 화면의 형식을 tag로 보여주는 방식이기 때문에 컴퓨터가 받아들일 수 있는 프로그래밍 언어로는 조작이 어렵다. console.dir(document.body) console.dir(document.body.children[1]) let newContents=document.bod..
코드스테이츠 spread & ...args Spread 문법 :배열을 풀어서 함수의 인자 값으로 넣은 후 계산하고 싶을 때 !!기존 배열을 없애지 않는다(immutable) function sum(x,y,z){ return x+y+z; } const number = [1,2,3] sum(...number) //배열을 각 각 요소로 불러오는 행위 6 어떤 값이 인자로 들어와도 이것을 배열로 바꾼 후 비교한다면 꼭 그 대상이 배열이 아니여도 가능한 것을 보여주는 문제 방법은 ...args spread && rest 예시 function getAllParamsByArgumentsObj() { return arguments; } getAllParamsByArgumentsObj("1","2","3") ==> argumnet {"0":"1", "1":"2"..
코드스테이츠 closure 사용 && 캡슐화의 이해 Clousure는 왜 나왔을까? 음... 운영체제의 관점에서 이것을 공부해보자 function이 만들어지면 이는 stack 에 들어가게 되는데 여기서 계산이 완료되면 이 함수의 선언한 변수에 할당된 값들은 계산 후 사라지게 된다. 그래서 내부함수에 그 값을 넣어 외부함수에서 호출 할 때 외부 함수의 변수의 값을 계속 저장할 수 있게 한다. 예를 들어 x+y라는 함수를 만들어 보자 function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; return innerFunc() ; } var inner = outerFunc(); inner(); // 10 함수 outerFunc는 내부함수 innerFunc를 반환하고 생을..

티스토리툴바