본문 바로가기

전체 글

 (306)
[useNavigate] useParams() & useLocation() useNavigate() within parent component. data는 map 함수를 통해서 받아온 argument 입니다. useParams() useLocation() useLocation() + without { } useParams()를 사용할 경우 => isbn13만 받을 수 있음 => 아마도 Route를 통해서 만들었던 정보같음. ( e.g 더 많은 정보를 사용할 수 있음.(hash, key, pathname, search, state {...}) => state {...}
[function]onClick={handleOnClickDetail(data) vs onClick={()=>{handleOnClickDetail(data)}} key points1. Arrow 함수를 사용한 것2.Arrow 함수에 data 함수를 전달 한것.  1. onClick={handleOnClickDetail(data)}:This expression immediately invokes the handleOnClickDetail function and passes the data argument to it.The return value of the function (which could be anything, including undefined) is assigned as the event handler.If the handleOnClickDetail function has side effects (performs actions without explic..
[github branch] git bash로 git hub branch 만들기 github에 연결 이후 new branch를 새롭게 생성 후 연결하는 것까지.git remote add origin URLgit checkout -b homeLib  # 로컬 브런치를 만들기git add .  # Add all changes to the staging areagit commit -m "Initial commit for homeLib branch"  # Commit changes with a messagegit push --set-upstream origin homeLib  # Push to the remote branch and establish tracking #로컬 브런치가 remote branch와 동일한 이름으로 트래킹 되기 시작함 git push --set-upstream or..
[props] 전달하기 spread syntax nested component : A compoent inside B component import Avatar from './Avator.js'; function Card ( { children } ) { return ( {children} ); } export default function Profile () { return ( ); } 참조https://react.dev/learn/passing-props-to-a-component
[arrow function]3가지 기본 이해 이 영상은 별코딩 영상을 참조하여 작성된 글입니다. 1. 일반함수: 함수 선언식과 함수 표현식 2. 화살표 함수 문법 정리 3. arguments와 가변인자 함수 선언식 - 호이스팅이 가능 - 함수 이름 필수 function main () { return "hi" } 함수 표현식 - 함수를 하나의 표현식 안에서 정의 - 호이스팅 불가능 //(익명 함수) const main = function () { console.log("hello") } const main = ( ) => { console.log("hello") } 화살표 함수 문법 function add ( a, b ) { return a + b } const add = ( a, b) = > { return a+b } //함수가 한줄 일 경우 re..
[useRef]기본 이 글은 별코딩 영상을 참조하여 작성된 들입니다. useRef 변화는 감지 해야하지만 그 변화가 랜더링을 발생시키면 안되는값을 다룰때 set000으로 데이터 값이 변경되면 (component가 있는)페이지가 re-loading되면서 변수값이 초기화 됨. const countRef = useRef(0); return ( Ref : {countRef.current} useRef의 2가지 특징 1 .저장공간 State의 변화 -> 랜더링 -> 컴포넌트 내부 변수들 초기화 Ref의 변화 -> No 랜더링 -> 변수들의 값이 유지됨 2. DOM 요소 접근 일반 변수와 다른 useRef값 왜냐, ref는 전생애 주기를 통해 값 유지 useEffect와 사용시에 좋은 조합 왜냐, ref는 re-rending을 발생시..
[Element&Component] Element 1. 실제로 대부분의 React 앱은 root.render()를 한 번만 호출. 2. React 엘리먼트는 불변객체. - 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없음. - 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줌. => UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것 3. 변경된 부분만 업데이트 React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트(페이지 전체를 re-loading 하지 않음) Component 일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있습..
[useEffect]특징 3가지 이 자료는 별코딩 영상을 참조하여 작성하였습니다. useEffect는 브라우져가 랜더링 이후에 돔에 그림을 그린다. useEffect은 함수 작성 방식에 따라서 함수 실행여부가 달라진다. 1. useEffect (기본) usefEffect (()=>{ // 작성함수 }) 페이지가 랜더링 될때마다 useEffect 함수가 작동 2. useEffect( 특정 useState 언급) useEffect (()=>{ // 작성함수 }, [ value(Dependecy Array) ]) value 값을 작성하면 작성한 value에서만 작동. 즉 [ ] 안에 넣은 useState의 상태가 변경될때만 useEffect function이 작동. 3. useEffect( [ ] No 언급) useEffect (()=>{ ..
[useState] CallBack 함수는 2가지 타입을 가지고 있다. 왜 useState를 설명하는데 CallBack 함수를 설명하냐하면, set000은 값이 변경될때마다 페이지를 re-loading 하기때문에 이것을 방지하기 위해서 Callback 함수를 활용. CallBack 함수의 2가지 특징 1. functions를 변수로 사용한다. => accept functions as arguments 2. functions를 돌려 준다. => Return functions => function 즉, 함수 '그대로'를 돌려주기 때문에 () === excute(실행문)이 필요. 참조 https://www.youtube.com/watch?v=gVhRtrOw-oM 2. functions를 돌려 준다. useState 사용 특히 input 함수에서 정보를 작성할 때마다 re-load..
[git] git (working Directory / Staging Area / Repository)작업하기 업데이트 일자(2024.01.30) 완전한 이해를 바탕으로 작성된 글이 아님으로 사전에 언급드립니다. 이 글은 드림코딩 영상을 참조하여 작성한 글입니다. 개인적으로 GIT 초보자가 가져야 할 Diagram 이라고 생각한다. git과 git hub는 다르다. git은 Local 저장소라 불리며, 3가지 단계로 나줘져 있다. git add 파일명 -untracked 파일 추가 staged modified 내용 수정이 이뤄지면 다시 add 를 통해서 staging area로 이동 시켜줘야 함 git rm --cached (파일명) staged를 add *과 add. 구분하기 add*하고 다시 a.txt 파일 삭제 하면 a.txt 삭제한 내용을 반영하지 못함( status) add.은 a.txt가 삭제된 상황까..
[Git] git과 github set 하기 업데이트 일자(2024.04.30)완전한 이해를 바탕으로 작성된 글이 아님으로 사전에 언급드립니다. 개인적으로 GIT 초보자가 가져야 할 Diagram 이라고 생각한다.git과 git hub는 다르다.git은 Local 저장소라 불리며, 3가지 단계로 나줘져 있다.    만약 이미 github에 만들어진 데이터를 복사할려면 아래의 URL에 들어가서 'git clone [github URL]' 복사https://angelplayer.tistory.com/222 [Github] Github 저장소(Repository) 생성 & 초기 설정Repository(저장소) 생성하기 github에 접속하여, Repositories 탭으로 이동하면 [New] 버튼이 있습니다. New 버튼을 누르면 새로운 Reposito..
[독서]독서를 안하는/못하는 이유 독서를 하지 안는/못하는 이유 스마트폰 저조한 독서율의 원인은 무엇일까. 과제 보고서를 작성할 때 자료조사를 위한 발췌독을 제외하고는 책을 읽지 않는다는 대학생 A씨는 “책은 다른 매체에 비해 시각적인 정보가 적고, 책의 내용을 머릿속으로 재구성하고 이해하는 과정이 필수적이기에 쉽게 손이 가지 않는다”며 평소 독서를 하지 않는 이유를 전했다. 이어 A씨는 “어렸을 적에는 책을 많이 읽었지만, 스마트폰을 사용하며 책과 멀어지기 시작했다”며 자신의 독서경험을 공유했다. 최근 콘텐츠들이 짧고 자극적인 것만을 추구하고, 쉽게 정보를 얻을 수 있는 원천이 많아지다 보니 독서를미루고 온라인 콘텐츠를 주로 향유하게 됐다는 것이다. 독서 환경 독서 장애 요인은 현재 주로 개인의 영역에서 분석되고 있으나, 사실 그 근간..

티스토리툴바