어쨌든 공부하는 블로그

Effect 특정 코드들이 처음 컴포넌트를 렌더링 할 때에만 실행되고, state가 변경되어 리렌더링 할 때에는 실행되지 않게 하기 위해 사용할 수 있다 function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); useEffect(() => { console.log("Call the API."); }, []); return ( {counter} click me ); } 위와 같이 useEffect의 첫번째 argument에 함수를 넣어두면, 첫번째 render 시점에만 동작하고, state가 변경되어 리렌더링되어도 여러 번 실행되지 않는다 딱 한 번만 실행되는 것이다 ..

Props * Props: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법(인자) function SaveBtn() { return Save Changes; } function ConfirmBtn() { return Confirm; } function App() { return ( ); } 기존의 방식대로라면 버튼을 여러 개 만들 때, 각각 컴포넌트로 만들어주어서 렌더링한다 하지만 각각의 버튼에 공통된 속성들(ex. style)이 들어간다고 가정한다면, 하나의 수정사항이 생길 때마다 모든 버튼 컴포넌트를 수정해야 하는 문제가 생긴다 function Btn(props) { return ( {props.text} ; } function App() { return ( ); } 직접 생성..

State const root = document.getElementById("root"); let counter = 0; const Container = () => ( Total clicks: {counter} Click me ); ReactDOM.render(, root); content를 작성하던 위치에 중괄호를 열고 변수를 담아줄 수 있다 변경 사항을 다시 HTML 문서에 반영하고 싶다면 전체를 재렌더링해 주면 된다 function App() { const data = React.useState(); const counter = data[0]; const modifier = data[1]; return ( Total clicks: {counter} Click me ); } 위와 같은 방식으로 us..

CreateElement const root = document.getElementById("root"); const h3 = React.createElement( "h3", { id: "title", onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a title" ); const btn = // 생략 const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root); 가장 기본적인 방식으로, createElement(HTML tag, property, content)를 통해 엘리멘트를 만들어내어 랜더 할 수 있다 하지만 사실상 쓸 일 없..

스크롤뷰에 버튼들을 넣고 게임을 실행시켜 보니, 버튼들의 위에서는 스크롤뷰가 제대로 스크롤 되지 않았다 원인은 버튼 오브젝트에 BindEvent를 통해 터치 이벤트를 구현하는 과정에서 UI_EventHandler 컴포넌트에서 상속받았던 IDargHandler 였다 Drag 기능을 쓰지 않음에도 해당 컴포넌트에 IDragHandler가 들어가 있어 버튼 오브젝트가 DragEvent를 가로챈 것이다 public class UI_EventHandler : MonoBehaviour, IPointerClickHandler, IDragHandler 그냥 IDragHanlder를 상속받는 부분을 지우고, 핸들러 관련된 코드를 지워주면 정상적으로 버튼 부분을 드래그 해도 전체 슬라이더가 스크롤 된다 만일 한 게임 내에..

일반적으로 Sprite들은 canvas 위에 올라간 UI의 뒤에 보이게 되는데, 이를 UI 앞으로 보이게 하고 싶었다 우선 Main Camera 외에 UI_Camera를 만들어 준 다음 위와 같이 각 카메라 설정을 해 주면 된다 체크해야 하는 부분은 Main Camera Clear Flags = Don't Clear 또는 Depth Only Culling Mask = Default Depth (UI Camera의 Depth보다 숫자가 높으면 된다) UI Camera Culling Mask = UI Depth 사용할 UI의 Layer는 UI로 설정되어 있어야 한다 그리고 Canvas 컴포넌트에서 Render Mode를 Screen Space - Camera로 변경해 준 다음, UI_Camera를 Rende..

(type) obj = (type)Enum.Parse(typeof(EnumType), "String"); 위와 같은 방식으로 Enum 객체를 Parse 할 수 있다 Object를 반환하므로 원하는 type(Enum, string, int...)을 캐스팅 해주면 된다 아래는 사용 예 Enum Fruit { Apple, Orange, Banana } string fruitName = (string)Enum.Parse(typeof(Fruit), "Apple"); // fruitName: "Apple" int fruitIdx = (int)Enum.Parse(typeof(Fruit), "Orange"); // fruitIdx: 1

'Image'은(는) 'UnityEngine.UI.Image' 및 'UnityEngine.UIElements.Image' 사이에 모호한 참조입니다. Image를 사용하는데 위와 같은 에러 메시지가 떴다 using Image = UnityEngine.UI.Image; using 문으로 Image를 UI.Image로 지정해주었더니 일단 오류가 해결되긴 하였다 +) Bind() 이런 식으로 함수를 사용할 때 에러가 났었음 UI Manager를 따로 만들어서 사용하고 있었으므로 BindImage 등의 함수를 따로 만들어 해당 함수에서 타입을 지정해줄 수 있게끔 변경해주었다

Assets > Resources > Data > StatData.json (유니티 상에서 추가가 안 되니 폴더로 직접 이동하여 만들어준다) { "stats": [ { "level": "1", "hp": "100", "attack": "10" }, { "level": "2", "hp": "150", "attack": "15" }, { "level": "3", "hp": "200", "attack": "20" } ] } Assets > Scripts > Data > Data.Content.cs (클래스명에 .이 들어가서 오류가 뜨지만, 클래스 사용 안 할 거기 때문에 무시) * data 파일을 어떤 포맷으로 읽어들일 것인가를 나타내기 위한 스크립트 파일 #region Stat [Serializable] p..

코루틴을 사용하면 이전에 함수에서 진행 중이던 상황을 저장했다가 복원하여 그대로 이어서 수행하게 할 수 있다 * yield break; 를 하게 되면 함수를 완전히 빠져나오게 된다 // 코루틴 사용 예 StartCoroutine("CoExplodeAfterSeconds", 4.0f); IEnumerator CoExplodeAfterSeconds(float seconds) { Debug.Log("Explode Enter"); yield return new WaitForSeconds(seconds); Debug.Log("Explode Execute!"); } // 코루틴 사용 및 삭제 Coroutine co = StartCoroutine("CoExplodeAfterSeconds", 4.0f); StartCo..